指令5——（v-for）
2019-03-01 本文已影响0人
小丘啦啦啦
一、v-for
1、迭代数组
遍历数组中的每一项。也可以是对象数组。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- item表示数组中的每一项 -->
<p v-for="item in list">{{item}}</p>
<!-- item表示数组中每一项，i为索引 -->
<p v-for="(item,i) in list">{{i}}——{{item}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[4,6,7,82,2]
}
})
</script>
</body>
</html>
2、迭代对象中的属性
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 第一个参数为值，第二个为键，还有第三个为索引（不常用） -->
<p v-for="(val,key) in user">值{{val}}+键{{key}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user:{
id:1,
name:'qiurx',
gender:'男'
}
}
})
</script>
</body>
</html>
3、迭代数字
迭代数字，次数从1开始算。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 直接循环数字，count会从1开始 -->
<p v-for="count in 10">第{{count}}次循环</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
二、特殊说明
2.20+当在组件中使用v-for，key是必须的。
Vue用v-for跟新已渲染过的元素列表时，默认“就地复用”，数据项顺序被改变（例如复选按钮），Vue将不是移动dom元素来匹配数据的顺序，而是简单的复用此处每个元素，并且确保他在特定索引下显示已被渲染过的每个元素（往复选按钮开头加了东西，原本被选中的按钮索引不会因多了复选按钮而下移，而是同样的还在原来的索引位置选中元素）。
往最前面增加一项后。
为了给Vue一个提示，以便跟踪每个节点的身份，从而重用和重新排列现有元素，需为每一项提供一个key属性作为唯一标识。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 双向数据绑定输入框和data中的数据 -->
<span>id:<input type="text" v-model="id"/></span>
<span>name:<input type="text" v-model="name"/></span>
<input type="button" value="增加" @click="add"/>
<!-- 注意：v-for循环时，key只能是number或者string -->
<!-- 注意：key在使用时，必须使用v-bind绑定此属性 -->
<!-- 在组件中或者特殊情况使用v-for，必须使用key指定唯一的值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox"/>{{item.id}}——{{item.name}}
</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list:[
{id:1,name:'路人甲'},
{id:2,name:'小兵乙'},
{id:3,name:'罗罗丙'}
],
id:'',
name:'',
},
methods:{
add(){
this.list.unshift({id:this.id,name:this.name});
}
}
})
</script>
</body>
</html>
三、品牌管理案例
