v-for是一个十分常用的遍历方法,他可以把他本身所在的标签复制很多份,具体份数看for循环多少次,如下例子
<body> <div id="app"> <ul> <li v-for="item in language">我会使用</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { language: ['java', 'python', 'kotlin', 'golang', 'C#'] } }) </script> </body>
我们可以看到
li标签遍历了五份
我们也可以把for循环里的元素取出来
除此之外我们还可以取出每个元素的索引值
其中item表示数据本身,后边的index就是索引值
下面我们用对象数据来举例子
<body> <div id="app"> <ul> <li v-for="(item, index) in language">{{index}}. 我会使用: {{item}}</li> </ul> <h2 v-for="item in person">{{item}}</h2> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { language: ['java', 'python', 'kotlin', 'golang', 'C#'], person: [ {name: '张三'}, {name: '李四'}, {name: '王五'} ] } }) </script> </body>
当然这不是我们想要的结果,我们仍可以通过点操作符取出里边的内容
