vue | 云深不知处

vue

Publish Date: 2019-01-23

Read Count:

v-for (列表渲染)

使用v-for要加上key，提高渲染效率，key值不重复

 <body>
    <div id='app'>
        <!-- 循环简单数组 -->
        <p v-for="(item,index) in list">索引：{{index}} -- 值：{{item}}</p><hr>
        <!-- 循环对象数组 -->
        <p v-for="user in list2">id:{{user.id}}--name:{{user.name}}</p><hr>
        <!-- 遍历对象 -->
        <p v-for="(val,key) in user">{{key}}:{{val}}</p><hr>

        <!-- 迭代数字 -->
        <p v-for="count in 10">这是第{{count}}次循环</p><hr>

        <!-- 在2.2.0+的版本里面，当在组件找那个使用v-for必须加v-key -->
    </div>

</body>
<script>
    // 实例化vue对象
    let vm = new Vue({
        // 绑定对象
        el:'#app',
        data:{
            list:[1,2,3,4,5,6],
            list2:[
                {id:1,name:'zhangsan'},
                {id:2,name:'lisi'},
                {id:3,name:'wangwu'}
            ],
            user:{
                id:1,
                user:'shaohang',
                age:20
            }
        },
    })
</script>