v-for指令

_enzo

已于 2022-08-28 12:35:21 修改

阅读量1.7k

点赞数 1

分类专栏： Vue.js 文章标签：前端框架

于 2021-07-28 11:28:52 首次发布

本文链接：https://blog.csdn.net/katherin_wanzi/article/details/119174285

版权

Vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.v-for指令的四种使用方式

在这里插入图片描述

<body>
    <div id="app">
        <!--值和索引-->
        <!-- <p v-for="(item, i) in list1">{{i}}----{{item}}</p> -->
        <!-- <p v-for="(user,i) in list2">{{user.id}}----{{user.name}}---索引{{i}}</p> -->

        <!--键值对：键放在括号内的第二个位置，第三个位置放索引-->
        <!-- <p v-for="(value, key, index) in user">{{index}}----{{value}}----{{key}}</p> -->

        <!--4.迭代数字:count值从1开始-->
        <p v-for="count in 10">这是第{{count}}次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list1:[1, 2, 3, 4, 5, 6],   //1.普通数组
                list2: [                     //2.对象数组
                    {id: 1, name: 'jerry'}, 
                    {id: 2, name: 'mary'},
                    {id: 3, name: 'tom'},
                    {id: 4, name: 'tony'}
                ],
                user: {                     //3.对象
                    id: 1,
                    name: 'kitty',
                    gender: 'female'
                }
            },
            methods: {
                
            }
        })   
    </script>
</body>

2.v-for中key的使用注意事项

v-for循环的时候，、key属性只能用number和string形式的值
key在使用的时候，必须使用v-bind绑定的形式，指定key的值
在组件中或者特殊情况中，使用v-for时出现问题，必须在使用的同时，指定唯一的number/string值作为:key的值

_enzo

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for指令

1.v-for指令的四种使用方式<body> <div id="app">   <!-- <p v-for="(user,i) in list2">{{user.id}}----{{user.name}}---索引{{i
复制链接

扫一扫