【条件渲染】使用key控制元素的可重用

于 2017-09-27 11:11:29 发布
阅读量395 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Vue2.0 文章标签： vue2.0
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/BorderBox/article/details/78110781
本文介绍Vue.js中使用v-if和v-else指令进行条件渲染的方法，并解释了使用key属性来帮助Vue更准确地知道如何高效更新DOM的重要性。

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

      <div>
          <template v-if="isOpen">
              名字<input type="text" placeholder="请填入你的名字" key="username">
          </template>
          <template v-else>
              性别<input type="text" placeholder="请填入你的性别" key="sex">
          </template>
          <button @click="isOpen = !isOpen">切换</button>
      </div>
加上key 就可以避免vue的默认高效渲染元素机制