v-for指令很像原生js中的foreach方法。
v-for指令的使用
1、使用v-for指令遍历普通数组
(1)语法
第一种调用方式
v-for="参数一,参数二 in 变量"
第二种调用方式
v-for="(参数一,参数二) in 变量"
其中参数代一表值,参数二代表索引值,参数二可省略,具体见示例
(2)示例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
1、循环普通数组
<p :class="['color']" v-for="item in list">值:{{item}}</p>
2、循环普通数组,带索引
<p :class="['color']" v-for="key,item in list">值:{{key}},索引:{{item}}</p>
3、循环普通数组,带索引
<p :class="['color']" v-for="item,key in list">值:{{item}},索引:{{key}}</p>
4、循环普通数组,带索引
<p :class="['color']" v-for="(item,key) in list">值:{{item}},索引:{{key}}</p>
5、循环普通数组,带索引
<p :class="['color']" v-for="(key,item) in list">值:{{key}},索引:{{item}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
list:[12,22,43,42,51,64]
}
})
</script>
</body>
</html>
效果:
本示例中结合了v-bind指令绑定样式哦
2、使用v-for指令遍历对象数组
(1)语法
第一种调用方式
v-for="参数一,参数二 in 变量"
第二种调用方式
v-for="(参数一,参数二) in 变量"
其中参数代一表值,参数二代表索引值,参数二可省略,具体见示例
(2)示例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
1、循环对象数组
<p :class="['color']" v-for="item in list">值:name={{item.name}},age={{item['age']}}</p>
2、循环对象数组,带索引
<p :class="['color']" v-for="key,item in list">值:name={{key.name}},age={{key['age']}},索引:{{item}}</p>
3、循环对象数组,带索引
<p :class="['color']" v-for="item,key in list">值:name={{item.name}},age={{item['age']}},索引:{{key}}</p>
4、循环对象数组,带索引
<p :class="['color']" v-for="(item,key) in list">值:name={{item.name}},age={{item['age']}},索引:{{key}}</p>
5、循环对象数组,带索引
<p :class="['color']" v-for="(key,item) in list">值:name={{key.name}},age={{key['age']}},索引:{{item}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
list:[{name:'小明',age:14},{name:'李华',age:15},{name:'张三',age:18}]
}
})
</script>
</body>
</html>
效果:
3、使用v-for指令遍历对象
(1)语法
第一种调用方式
v-for="参数一,参数二,参数三 in 变量"
第二种调用方式
v-for="(参数一,参数二,参数三) in 变量"
其中参数代一表键值,参数二代表键名,参数三代表索引值,参数二、三可省略,具体见示例
(2)示例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
1、遍历对象
<p :class="['color']" v-for="node in user">值:{{node}}</p>
2、遍历对象,带键名
<p :class="['color']" v-for="node,i in user">值:{{node}},键名:{{i}}</p>
3、遍历对象,带键名
<p :class="['color']" v-for="i,node in user">值:{{i}},键名:{{node}}</p>
4、遍历对象,带键名
<p :class="['color']" v-for="(node,i) in user">值:{{node}},键名:{{i}}</p>
5、遍历对象,带键名
<p :class="['color']" v-for="(i,node) in user">值:{{i}},键名:{{node}}</p>
6、遍历对象,带键名、索引
<p :class="['color']" v-for="(i,node,index) in user">值:{{i}},键名:{{node}},索引:{{index}}</p>
7、遍历对象,带键名、索引
<p :class="['color']" v-for="i,node,index in user">值:{{i}},键名:{{node}},索引:{{index}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
user:{
name:'李华',
age:16,
className:'高三14班'
}
}
})
</script>
</body>
</html>
效果:
4、使用v-for指令遍历数字
(1)语法
第一种调用方式
v-for="参数一,参数二 in 变量"
第二种调用方式
v-for="(参数一,参数二) in 变量"
其中参数代一表值,参数二代表索引值,参数二可省略,具体见示例
(2)示例
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
1、遍历数字
<p :class="'color'" v-for="val in 13">{{val}}</p>
2、遍历数字,带索引
<p :class="'color'" v-for="val,index in 13">{{val}},{{index}}</p>
3、遍历数字,带索引
<p :class="'color'" v-for="(val,index) in 13">{{val}},{{index}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
})
</script>
</body>
</html>
效果:
注意:v-for指令遍历数字时,并不是从0开始遍历,而是从1开始
5、重点:v-for指令中key属性的搭配使用
自vue2.2版本开始,在组件中使用v-for指令时,必须使用key属性。不使用会怎样呢?
(1)不使用key属性
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
id:<input type="text" name="" id="" v-model="id" />
name:<input type="text" name="" id="" v-model="name" />
age:<input type="text" name="" id="" v-model="age" />
<button type="button" @click="add">添加</button>
<p :class="'color'" v-for="item in list" ><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
age:'',
list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
},
methods:{
add:function(){
this.list.unshift({id:this.id,name:this.name,age:this.age});
},
},
})
</script>
</body>
</html>
执行结果:
此时,让我们选中第二个p标签,并在上面三个输入框中输入内容,如下:
点击添加按钮,结果如下:
此时,结果和我们想象中的并不一致,程序并没有记住我们所选的内容
(2)使用key属性
代码:注意key属性是怎么使用的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.color{
color: #FF0000;
}
</style>
</head>
<body>
<div id="app">
id:<input type="text" name="" id="" v-model="id" />
name:<input type="text" name="" id="" v-model="name" />
age:<input type="text" name="" id="" v-model="age" />
<button type="button" @click="add">添加</button>
<p :class="'color'" v-for="item in list" :key="item.id"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
id:'',
name:'',
age:'',
list:[{id:1,name:'小明',age:14},{id:2,name:'李华',age:15},{id:3,name:'张三',age:18}]
},
methods:{
add:function(){
this.list.unshift({id:this.id,name:this.name,age:this.age});
},
},
})
</script>
</body>
</html>
点击添加按钮前:
点击添加按钮后:
此时,程序的执行结果即是我们想要的
(3) 使用key属性时的注意事项
(1)key属性绑定的值只能是string或number类型
将上面例子中的key属性绑定的值改为对象:
<p :class="'color'" v-for="item in list" :key="item"><input type="checkbox">{{item.id}},{{item.name}},{{item.age}}</p>
控制台报错:
(2)key属性绑定的值必须是唯一值!
当我们给网页上添加如下内容时:
此时,我们勾选两个id为2的p标签:
在添加一个id为2的标签,此时结果和预想的不同(key属性绑定的是id),同时控制台报错:
控制台显示的错误是:key属性值重复。即key绑定的值应是唯一的!