v-for是vue 的循环指令,作用是遍历数组(对象)的每一个值
基本使用
如:
<li v-for="item in arr"> {{item}} </li> var vue = new Vue({ el: "#app", data: { arr: [ '苹果', '橘子', '香蕉', '草莓' ] } })
v-for还有index和key属性
<li v-for="(item,index) in arr" :key="index">{{index}}-{{item}}</li>
item指的是被遍历的数组(对象)的每一个值,item的命名不是规定的,可以自定义命名
index指的是每一项被遍历的值的下标索引值
key是用来给每一项值加元素标识,作用是为了区分元素,为了实现最小量的更新
v-for还可以用来遍历对象
var vue = new Vue({ el: "#app", data: { obj:{ name: '小明', age: '17岁', height: '175cm', sex: '男', hobby: '打篮球' } } }) <li v-for="(item,index) in obj" :key="index">{{index}}:{{item}}</li>
和数组内容不同的是index此时代表的是对象的key
正确的表示方法