vue中v-for 循环对象中的属性

 更新时间:2021-12-17 12:02:01   作者:佚名   我要评论(0)

目录1、循环对象内的值2、循环对像3、循环键和值1、循环对象内的值


<body>



<div id="app">

<!-- 循环对象内的值 -->

1、循环对象内的值

<body>



    <div id="app">

        <!-- 循环对象内的值 -->

        <ul>

            <li v-for="item in per">

                {{item}}

            </li>

        </ul>

    </div>



    <script src="./js/vue.js"></script>

    <script>



        let vm =new Vue({

            el:'#app',

            data:{

                per:{

                    id:1,

                    name:'小明',

                    age:19,

                    sex:"男"

                }

            }

        })

    </script>

2、循环对像

3、循环键和值

<!-- 循环键和值 -->

        <ul>

                    <!-- 值    键 -->

            <li v-for="(value,key) in per">

                {{value}}---{{key}}

            </li>

        </ul>

到此这篇关于 vuev-for 循环对象中的属性的文章就介绍到这了,更多相关 v-for 循环对象中的属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
  • 深入浅析Vue.js 中的 v-for 列表渲染指令
  • 详解vuejs之v-for列表渲染
  • Vue中v-for更新检测的操作方法
  • 详解vue中v-for的key唯一性
  • vue中v-for指令完成列表渲染

您可能感兴趣的文章:

相关文章

  • vue中v-for 循环对象中的属性

    vue中v-for 循环对象中的属性

    目录1、循环对象内的值2、循环对像3、循环键和值1、循环对象内的值 <body> <div id="app"> <!-- 循环对象内的值 -->
    2021-12-17
  • vue实现记事本小功能

    vue实现记事本小功能

    本文实例为大家分享了vue实现记事本小功能的具体代码,供大家参考,具体内容如下 直接上代码: <!DOCTYPE html> <html lang="en"> <script
    2021-12-17
  • vue插值表达式和v-text指令的区别

    vue插值表达式和v-text指令的区别

    目录1.使用插件表达式2.在插件表达式中使用v-cloak解决闪烁问题3.插件表达式{{message}} 语法只能在标签内容中使用 {{}}这种语法叫做插值表达
    2021-12-17
  • JavaScript之String常见的方法详解

    JavaScript之String常见的方法详解

    目录1、charAt语法参数index返回值2、concat语法参数str2 [, …strN]返回值3、indexOf语法参数searchValuefromIndex(可选)返回值特殊情况4
    2021-12-17
  • vue指令v-html和v-text

    vue指令v-html和v-text

    目录1、v-text 文本渲染指令2、 v-html1、v-text 文本渲染指令 (只能渲染文本不能渲染标签) ? <div id="test"> <p v-text="
    2021-12-17
  • vue指令?v-bind的使用和注意需要注意的点

    vue指令?v-bind的使用和注意需要注意的点

    目录1、v-bind:可以为元素的属性绑定一些数据2、v-bind:可以简写成 : 推荐直接写冒号3、v-bind:指令表达式的拼接,1、v-bind:可以为元素的
    2021-12-17
  • JavaScript之Array常见的方法详解

    JavaScript之Array常见的方法详解

    目录不改变原数组的方法1、concat语法:参数:返回值:2、join语法:参数:返回值:注意:3、slice语法:参数:返回值:4、toString语法:返
    2021-12-17
  • vue+webrtc(腾讯云) 实现直播功能的实践

    vue+webrtc(腾讯云) 实现直播功能的实践

    目录1.直播效果2.开直播步骤2.1引入腾讯web端(快直播)脚本2.2在需要使用直播的界面 添加一个视频容器(开启直播后,显示视频的位置)2.3创建直
    2021-12-17
  • JS实现canvas仿ps橡皮擦刮卡效果详解

    JS实现canvas仿ps橡皮擦刮卡效果详解

    目录效果演示: 主要JS代码实现 <div class="box" id="bb"> <canvas id="cas" width="1366" height="651"></canvas> </div>
    2021-12-17
  • vue利用openlayers加载天地图和高德地图

    vue利用openlayers加载天地图和高德地图

    目录一、天地图部分1、在vue中安装openlayers二、高德地图部分一、天地图部分 1、在vue中安装openlayers npm i --save ol 这里说的vue是
    2021-12-17

最新评论