vue使用 v-if 有时候显示异常

隔壁老陈先生

于 2020-05-18 15:15:36 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42692714/article/details/106193419

vue 专栏收录该内容

7 篇文章

订阅专栏

本文解析了Vue中template标签不能使用key属性的原因，并强调key应用于真实元素上，如input或span，以帮助Vue识别和复用DOM，避免错误提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候，我们用v-if ,

vue使用v-if时的注意点 https://blog.csdn.net/wang729506596/article/details/81014739

里面有个问题，

<template v-if="type=== 'username'" key="1">  
  <label>用户名</label>  
  <input placeholder="输入用户名">  
</template>  
<template v-else  key="2">  
  <label>邮箱</label>  
  <input placeholder="输入邮箱">

template 是不能写 key 的，因为他不是原因分析
cannot be keyed. Place the key on real elements instead
翻译：不可以被key标识。请把key使用在真实的元素上比如span . .

报错已经说明的很明显了 <不是一个真实的标签元素，所以不能使用key
key是用来区分dom的，方便vue进行复用。
具体的说明可以查看文档：https://cn.vuejs.org/v2/api/#key