Vue - v-for
原创
©著作权归作者所有：来自51CTO博客作者ITKaven的原创作品，请联系作者获取转载授权，否则将追究法律责任
推荐：Vue汇总
Vue - v-for
v-for 使用
v-for就相当于程序语言中的for一样，可以遍历一个Array、Object、number、string、Iterable(2.6 新增)。
遍历Array。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: ['Java' , 'Vue']
}
})
</script>
遍历Array，增加索引。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="(item,index) in list">list[{{index}}] : {{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: ['Java' , 'Vue']
}
})
</script>
遍历Object。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="(item,index) in list">list[{{index}}] : [{{item.username}} , {{item.password}}]</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: [{
username: 'kaven',
password: '123'
},{
username: 'jack',
password: '456'
}]
}
})
</script>
遍历Object，增加属性名。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="(item,key,index) in list">list[{{key}}] : [{{item}}] 是第{{index}}个属性</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: {
username: 'kaven',
password: '123'
}
}
})
</script>
遍历number。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="count in 5">这是第{{count}}次</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div'
})
</script>
遍历string。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="item in list" >{{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: 'kaven'
}
})
</script>
遍历Iterable。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="item in list" >{{item}}</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: new Set(['Kaven' , 'Jack' , 'Java'])
}
})
</script>
遍历Iterable。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="div">
<ul>
<li v-for="item in map" >{{item[0]}}:{{item[1]}}</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
map: new Map([['key' , 'value'] , ['kaven' , 'jack']])
}
})
</script>
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"></script>
</head>
<body>
<div id="div">
<input type="text" v-model="inputValue">
<button v-on:click="click">提交</button>
<ul>
<li v-for="item in list" >
<input type="checkbox" >{{item.name}}
</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: [{
id: 1,
name: 'kaven'
},{
id: 2,
name: 'jack'
}],
inputValue: '',
id: 3
},
methods: {
click(){
this.list.unshift({id: this.id++ , name: this.inputValue});
this.inputValue = '';
}
}
})
</script>
unshift()：将新项添加到数组起始位置。
由上面程序可以得到如下图页面，先选择第一个。
然后，在输入框中输入Java，点击提交，得到下图，但这不是我们想要的效果，我们想要选择还是在kaven那里。
所以需要使用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"></script>
</head>
<body>
<div id="div">
<input type="text" v-model="inputValue">
<button v-on:click="click">提交</button>
<ul>
<li v-for="item in list" :key="item.id">
<input type="checkbox" >{{item.name}}
</li>
</ul>
</div>
</body>
</html>
<script>
var vue = new Vue({
el: '#div',
data: {
list: [{
id: 1,
name: 'kaven'
},{
id: 2,
name: 'jack'
}],
inputValue: '',
id: 3
},
methods: {
click(){
this.list.unshift({id: this.id++ , name: this.inputValue});
this.inputValue = '';
}
}
})
</script>
和之前进行一样的测试，这次情况满足我们的需求。
可以简单的理解：加了key(一定要具有唯一性) 的checkbox跟这个key指定的参数进行了一个关联，默认应该是索引。
vue和react虚拟DOM的Diff算法大致相同，首先讲一下Diff算法的处理方法，对操作前后的Dom树同一层的节点进行对比，一层一层对比，如下图：
当某一层有很多相同的节点时，也就是列表节点时，Diff算法的更新过程默认情况下也是遵循以上原则。
比如这个情况：
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的：
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？
所以我们需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
v-for的使用就介绍到这里。
写博客是博主记录自己的学习过程，如果有错误，请指正，谢谢！
参考博客：
