template
2021-08-11 14:14:30 小于 1 分钟
当需要遍历多个元素而又不想增加额外的元素节点的时候，可以结合
Vue中提供的template遍历渲染；
- 结合
v-for使用； - 可以结合
v-if使用； - 不能结合
v-show使用； - 渲染的结果
template标签不会在Dom中出现；
提示
template 上不能使用 key，要把 key 加到真实的 DOM 节点
<body>
<div id="app">
<button @click="ok">点击反转</button>
<template v-for="item in msg">
<div :key="item.id">
{{item.name}}
<input type="text">
</div>
</template>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
msg: [
{id: 1, name: "小明"},
{id: 2, name: "小红"},
{id: 3, name: "小李"},
{id: 4, name: "小绿"}
]
},
methods: {
ok: function () {
//点击反转数组
this.msg.reverse()
}
}
})
</script>
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
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