v-for on a template 的一个小疑问

发布于 2022-09-07 20:48:13 字数 1464 浏览 10 评论 0

看官方文档说在使用 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>