v-for的用法
//js中的foreach [5,7,9].forEach((item,i)=>{console.log(item+'+'+i)})
普通数组
<div id="app"> <!-- value和i为自定义名称，可以改，意义不变 --> <p v-for="(value,i) in list">索引值：{{i}} 每一项是：{{value}}</p> </div> <script > var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6] }, methods:{ } }) //[5,7,9].forEach((item,i)=>{console.log(item+'+'+i)}) </script>
对象数组
<div id="app"> <!-- value和i为自定义名称，可以改，意义不变 --> <p v-for="user in list2">id：{{user.id}} name：{{user.name}}</p> <!-- 可以查看索引值 --> <p v-for="(user,i) in list2">id：{{user.id}} name：{{user.name}} 索引值{{i}}</p> </div> <script > var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6], list2:[ { id:1,name:'xzy1'}, { id:2,name:'xzy2'}, { id:3,name:'xzy3'}, { id:4,name:'xzy4'}, ] }, methods:{ } })
循环对象
<div id="app"> <!-- 在遍历对象身上的键和值的时候，除了有值，键，在第三个位置还有索引 --> <p v-for="(val,key,i) in userr">值是：{{val}} 键是：{{key}} 索引值是：{{i}}</p> </div> <script > var vm = new Vue({ el:'#app', data:{ list:[1,2,3,4,5,6], list2:[ { id:1,name:'xzy1'}, { id:2,name:'xzy2'}, { id:3,name:'xzy3'}, { id:4,name:'xzy4'}, ], userr:{ id:1, name:'xzy!', gender:'女' } }, methods:{ } })
迭代数字
<div id="app"> <!-- in后面能放数字，但是count从1开始 --> <p v-for="count in 10">第{{count}}次循环</p> </div>
- v-for要写在循环生成的元素上，不能写在父元素里
- 当new Vue()扫瞄到v-for，自动遍历of后数组中每个元素，每遍历一个元素，创建一个当前html元素的副本
- value和i的使用范围仅限于当前元素及其子元素范围内，不能在当前元素外使用
v-for的注意事项
当在组件中使用v-for时，key属性必需，对比如下：
当不使用key属性时，选中大二，然后在list数组的起始位置增加一个对象(使用unshift)，增加完成后，checkbox变成选中大一。
<body>
<div id="app">
<div>
<label>ID:<input type="text" v-model="id"></label>
<label>Name:<input type="text" v-model="name"></label>
<input type="button" value="添加" v-on:click="add()">
</div>
<p v-for="item in list2">
<input type="checkbox">
{{item.name}}
</p>
</div>
<script >
var vm = new Vue({
el:'#app',
data:{
name:'',
id:'',
list2:[
{ id:1,name:'大一'},
{ id:2,name:'大二'},
{ id:3,name:'大三'},
{ id:4,name:'大四'},
]
},
methods:{
add(){
this.list2.unshift({id:this.id,name:this.name})
}
}
})
</script>
使用key之后
在组件中，使用v-for循环的时候，或者在一些特殊情况下，如果v-for有问题，必需在使用v-for的同时指定唯一的：key值
<p v-for="item in list2" v-bind:key='item'>
