看官方文档说在使用v-for的时候,需要使用一个独一无二的key值来提升性能,说这是和虚拟dom有关。
但是我在template标签上面绑定v-for进行循环的时候,绑定key值显示报错了,但是页面正常输出数据来了
- <template> cannot be keyed. Place the key on real elements instead.
这个意思我大概知道,应该是说key应该在真是的元素上面。
难道这种情况下的v-for就不用绑定key值吗?
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuetest.html</title>
<link rel="stylesheet" href="./main.css">
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<template v-for='(item,index) in list' :key='item.id'>
<p>{{item.content}}</p>
<span>{{item.id}}</span>
</template>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
list:[
{
id:0,
content:'小燕子是想气死我魏姐'
},
{
id:1,
content:'张雪迎工作室 澄清'
},
{
id:2,
content:'结婚登记率连续4年下降'
},{
id:3,
content:'秦俊杰'
}
],
}
})
</script>
</body>
</html>
用key不能提升性能,是为了防止Vue默认的元素复用导致某些情况下出现数据绑定渲染问题,而template是虚拟节点,不存在复用,如果你想要绑定的话,给下面的p和span标签绑定就好,一般只需要给和数据绑定有关的元素绑定key值