v-for 的基本用法
v-for 用于实现列表渲染，可以使用item in items和item of items的语法
模版写法：
1
2
3
| <li v-for="item in items">{{ item }}</li>
或：
<li v-for="item of items">{{ item }}</li>
|
js写法：
1
2
3
4
5
6
7
8
| var vm = new Vue({
el: '#app',
data() {
return {
items: [1, 2, 3, 4, 5]
}
}
})
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
items: [1, 2, 3, 4, 5]
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到成功显示出如下数据：
v-for 渲染对象的键值对
键值对是元素的索引值，也就是本例中的对象在数组中所占的下标。
模版写法：
1
2
3
| <li v-for="(item, index) in items">{{ item }}</li>
或：
<li v-for="(item, item) of items">{{ item }}</li>
|
其实就是多了一个index。
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ item }} --- {{ index }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
items: [1, 2, 3, 4, 5]
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到成功显示出如下数据：
1
2
3
4
5
| 1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4
|
key的说明
- 就地复用策略：当在进行列表渲染时，vue会直接对已有的标签进行复用，不会将所有的标签重新删除和创建，只会创建新的元素然后把新的数据渲染进去。
- key属性可以用来提升v-for渲染的效率，vue不会去改变原有的元素和数据，而是创建新的元素然后把新的数据渲染进去。
- key属性必须是唯一的标识，很多人使用
index，不过建议使用数据的id可能会更好。
- 是否使用
key都不会影响功能的实现，但是在vue2.2.0+版本中，如果不实用key，将会出现警告。
key的使用
模版写法：
1
2
3
| <li v-for="(item, index) in items" :key="index">{{ item }}</li>
或：
<li v-for="(item, item) of items" :key="index">{{ item }}</li>
|
完整代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="app">
<ul>
<li
v-for="(item, index) in items"
:key="index"
>
{{ item }} --- {{ index }}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data() {
return {
items: [1, 2, 3, 4, 5]
}
}
})
</script>
</body>
</html>
|
在浏览器运行此文件，可以看到成功显示出如下数据：
1
2
3
4
5
| 1 --- 0
2 --- 1
3 --- 2
4 --- 3
5 --- 4
|
总结
通过以上各种例子可以发现，其实v-for也不会太难，而且在工作中，v-for是经常使用的，比如在加载商品列表时会使用，加载信息记录时也会使用，所以平时需要多写一下。