v-for
作用:基于一个数组来渲染一个列表。
语法形式:item in items (其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名。)
使用v-for迭代一个数组
实例:做一个列表渲染:
<template>
<div class="main">
<ul>
<li v-for="item in mystudents">姓名:{{item.name}}年龄:{{item.age}}住址:{{item.address}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
mystudents: [
{ name: "lisa", age: 12, address: "shanghai" },
{ name: "coco", age: 13, address: "suzu" },
{ name: "meimei", age: 11, address: "guangzhou" }
]
};
},
methods: {}
};
</script>
渲染结果:
v-for 还支持一个可选的第二个参数为当前项的索引。
<template>
<div class="main">
<ul>
<li v-for="(item,index) in mystudents">索引是:{{index}} 姓名:{{item.name}}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
mystudents: [
{ name: "lisa"},
{ name: "coco"},
{ name: "meimei"}
]
};
},
methods: {}
};
</script>
渲染结果:
注:你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法:
<div v-for="item of items"></div>
<li v-for="item of mystudents">姓名:{{item.name}}</li>
使用v-for迭代一个对象
迭代一个对象,参数表示对象值
<template>
<div class="main">
<ul>
<li v-for="val in myobj">
{{val}}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
myobj:{
firstname:'john',
lastname:'doe',
age:12
}
};
},
methods: {}
};
</script>
结果显示对象中的值:
当提供第2个参数时,第2个参数表示键名:
<li v-for="(val,key) in myobj">
{{key}}-{{val}}
</li>
结果如下:
当提供第3个参数时,第3个参数表示索引:
<li v-for="(val,key,index) in myobj">
{{key}}-{{val}}-{{index}}
</li>
显示结果:
v-for使用key
key的作用:
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key attribute:
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
注意:
- 建议尽可能在使用 v-for 时提供 key 属性,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
- 因为它是 Vue 识别节点的一个通用机制,key 并不仅与 v-for 特别关联。后面我们将在指南中看到,它还具有其它用途。
- 不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
实例
(1)显示过滤后的结果:
<template>
<div>
<ul>
<li v-for="(n,index) in evenNum" :key="index">{{n}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
num:[0,1,2,3,4,5,6]
}
},
computed:{
evenNum:function(){
return this.num.filter((item) => {return item%2==0});
}
}
}
</script>
显示结果:
(2)使用methods方法过滤一个二维数组
<template>
<div>
<ul v-for="(x,index) in arry" :key="index">
数组中第{{index+1}}个数组符合条件的数字如下:
<li v-for="(y,i) in evenFun(x)" :key="i">{{y}}</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return{
arry:[[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
}
},
methods:{
evenFun(n)
{
return n.filter((item) => {
return item%2==0;
})
}
}
}
</script>
显示结果如下:
(3)v-for也可以接受整数。在这种情况下,它会把模板重复对应次数。
<span v-for="n in 10">{{n}}</span>
打印结果:
12345678910