Vue的 v-for 指令
Posted eyes++
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的 v-for 指令相关的知识，希望对你有一定的参考价值。
相关说明全在代码注释里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<!-- 遍历数组 -->
<div id="app1">
<!-- 1.在遍历的过程中，没有使用索引值（下标值） -->
<ul>
<li v-for="item in names">{{item}}</li>
</ul>
<!-- 2.在遍历的过程中，获得索引值 -->
<ul>
<li v-for="(item,index) in names">{{index}} : {{item}}</li>
</ul>
</div>
<script>
const app1 = new Vue({
el: '#app1',
data: {
names:['虚哥','大鹏','济钢','鸡哥']
}
})
</script><hr>
<!-- 遍历对象 -->
<div id="app2">
<!-- 1.遍历对象时，只获得值 -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.遍历对象时，获得属性与值 -->
<ul>
<li v-for="(item,key) in info">{{key}} : {{item}}</li>
</ul>
<!-- 3.遍历对象时，获得属性、值和下标 -->
<ul>
<li v-for="(item,key,index) in info">{{index}} : {{key}} : {{item}}</li>
</ul>
</div>
<script>
const app2 = new Vue({
el: '#app2',
data: {
info: {
name: '超哥',
age: 18,
height: '1.75m',
weight: '300斤'
}
}
})
</script><hr>
<!--
v-for 绑定与非绑定key的区别
官方推荐我们在使用 v-for 时，给对应的元素或组件添加上一个 :key 属性。
原因如下：
当某一层有很多相同节点时，也就是列表结点，我们希望插入一个新的结点，
比如数组 arr=['A','B','C','D'] 的'B'与'C'中插入节点 'E',
Vue的算法默认执行方式为：把B更新为E，把C更新为B，把D更新为C，最后插入D
这种算法效率很低，因此需要使用key给每个节点做一个唯一标识
如此一来默认算法就可以正确识别此节点，就直接找到正确的位置区插入新的节点,其他元素不重新渲染
不推荐绑定 index ,因为 index 是变化的
-->
<div id="app3">
<ul>
<!-- 展示什么就绑定什么 -->
<li v-for='item in letters' :key="item">{{item}}</li>
</ul>
<button @click='add()'>插入元素</button>
</div>
<script>
const app3 = new Vue({
el: '#app3',
data: {
letters: ['A','B','C','D']
},
methods: {
add:function() {
this.letters.splice(2,0,'E');
}
}
})
</script>
<!-- 遍历案例：点谁谁变红 -->
<style>
.active {
color: red;
}
</style>
<div id="app4">
<ul>
<li v-for='(item,index) in movies'
:key='item'
:class="{active: index===currentIndex}"
@click='liClick(index)'>
{{item}}
</li>
</ul>
</div>
<script>
const app4 = new Vue({
el: '#app4',
data: {
movies: ['海王', '海贼王', '加勒比海盗', '海尔兄弟'],
currentIndex : 0
},
methods: {
liClick: function(index) {
this.currentIndex = index;
}
}
})
</script>
</body>
</html>
以上是关于Vue的 v-for 指令的主要内容，如果未能解决你的问题，请参考以下文章