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
正确的表示方法