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'>
