Vue循环渲染，v-for
1.v-for基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<!--v-for循环普通数组-->
<p v-for="(item,i) in list">--索引值--{{i}} --每一项--{{item}}</p>
<br />
<!--v-for循环对象数组-->
<p v-for="(item,i) in listObj">--索引值--{{i}}--id--{{item.id}} --姓名--{{item.name}}</p>
<br />
<!--v-for迭代对象；注意，在遍历对象的键值对的时候，除了有 val 和 key,在第三个位置还有一个索引-->
<p v-for="(val,key,i) in user">--索引值--{{i}}--键是--{{key}} --值是--{{val}}</p>
<br />
<!--v-for迭代数字； in 后面我们放过数组、对象数组、对象，还可以放数字-->
<!-- 注意：如果使用v-for迭代数字的话，前面 count 的值从 1 开始-->
<p v-for="count in 10">这是第{{count}}次循环</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
list: [1, 2, 3, 4, 5],
listObj: [{
id: 1,
name: 'zs1'
},
{
id: 2,
name: 'zs2'
},
{
id: 3,
name: 'zs3'
},
{
id: 4,
name: 'zs4'
},
{
id: 5,
name: 'zs5'
},
],
user: {
id: 1,
name: '小明',
gender: '男',
age: '18',
classname: 'A1631'
}
}
})
</script>2.v-for为什么要加key
先看示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<div>
<input type="text" v-model="name">
<button @click="add">添加</button>
</div>
<ul>
<li v-for="(item,i) in list">
<input type="checkbox"> {{item.name}}
</li>
</ul>
<br />
<ul>
<li v-for="(item, i) in list" v-bind:key="item.id">
<input type="checkbox"> {{item.name}}
</li>
</ul>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
name: '',
newId: 3,
list: [{
id: 1,
name: 'xt1'
},
{
id: 2,
name: 'xt2'
},
{
id: 3,
name: 'xt3'
},
],
},
methods: {
add() {
//注意这里是unshift
this.list.unshift({
id: ++this.newId,
name: this.name
})
this.name = ''
}
},
});
</script>没有key时，当选中xt2时，添加xt后选中的却是xt1，并不是我们想要的结果；有key时，当选中xt2时，添加xt后依旧选中的是xt2，是我们想要的结果。
vue中列表循环需加:key="唯一标识" 唯一标识可以是item里面id index等，因为vue组件高度复用，增加Key可以标识组件的唯一性。
3.v-if 与 v-for 一起使用
当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用。
有数据时显示循环列表，没有数据时显示暂无数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for 指令</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div >
<ul v-if="todos.length>0">
<li v-for="todo in todos" v-bind:key="todo.id">
{{ todo.name }}
</li>
</ul>
<p v-else>暂时没有数据</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el: "#app",
data: {
todos: [{
id: 1,
name: '列表1'
},
{
id: 2,
name: '列表2'
},
{
id: 3,
name: '列表3'
},
],
},
});
</script>- 上一篇 »Vue v-for操作与computed结合功能
- 下一篇 »Vue v-for操作对象与数值