vue指令之v-for和key属性
一、 v-for
1. v-for遍历数组
<div id="app">
<h3>好饿，我好想吃~~~~</h3>
<ul v-for="menu in list">
<li>{{menu}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:['鸭血粉丝','螺蛳粉','大碗米线','黄焖鸡','地锅鸡']
}
})
</script>
来吧展示:
如果需要索引,则给v-for传入一个参数,index表示的是索引(名称任意取)
<div id="app">
<h3>好饿，我好想吃~~~~</h3>
<ul v-for="(menu,index) in list">
<li>安排一下啵：{{index}}--------{{menu}}</li>
</ul>
</div>
2. v-for循环数组对象 01
传入多个对象:
<div id="app">
<h3>好饿，我好想吃~~~~</h3>
<!-- <ul v-for="(menu,index) in list">-->
<!-- <li>安排一下啵：{{index}}--------{{menu}}</li>-->
<!-- </ul>-->
<ul v-for="(menu,index) in list">
<li>第{{menu.num}}好吃--------{{menu.name}}-------索引{{index}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// list:['鸭血粉丝','螺蛳粉','大碗米线','黄焖鸡','地锅鸡']
list:[
{num:1,name:'鸭血粉丝'},
{num:2,name:'螺蛳粉'},
{num:3,name:'大碗米线'},
{num:4,name:'黄焖鸡'},
{num:5,name:'地锅鸡'}
]
}
})
</script>
2. v-for循环数组对象 02
<div id="app">
<ul>
<li v-for="(val,key,i) in menu">键：{{key}} ----- 值：{{val}} ----- 索引下标：{{i}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
menu:{
num:1,
name:'小米椒爱上小公鸡',
message:'噢~~~这该死的美味'
}
}
})
</script>
3.v-for循环数值
<p v-for="(item,i) in 10">这是数值：{{item}}-----这是索引：{{i}}</p>
二、key属性的使用
通过一个案例来引入key
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="num">
</label>
<label>Name:
<input type="text" v-model="name">
</label>
<input type="button" value="添加" @click="add">
</div>
<ul>
<li v-for="(menu,i) in list">
<input type="checkbox"/>排名：{{menu.num}}------美味：{{menu.name}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
num: '',
name: '',
list:[
{num:1,name:'鸭血粉丝'},
{num:2,name:'螺蛳粉'},
{num:3,name:'大碗米线'},
{num:4,name:'黄焖鸡'},
{num:5,name:'地锅鸡'}
]
},
methods: {
add() { // 添加方法
this.list.unshift({ num: this.num, name: this.name })
}
}
})
</script>
</body>
来吧展示:
问题:
当选中状态的时候取添加元素,我们发现,选中的状态自动跳到下一个input中取,并没有保持它原来的元素的状态
原因:在默认情况下，我们从data把一个数组渲染到页面上的时候，就不会再关注这个状态了
解决方法:
给元素绑定一个key属性 v-bind:key="里面是唯一的标识符"
这个状态和当前循环的数值做了一个绑定关系，所以状态会存在
所以只要涉及到v-for循环，建议给循环的每一项都加上:key这个属性
<li v-for="(menu,i) in list" :key="menu.num">
来吧展示:
