【vue】条件渲染 v-if v-else

WANGHUAN-

于 2019-03-13 13:53:48 发布

阅读量197

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_39583930/article/details/88530908

版权

vue 专栏收录该内容

15 篇文章

订阅专栏

本文介绍如何在Vue中使用key属性确保两个组件的独立性，避免在条件渲染时复用相同的DOM元素，通过示例展示了当登录类型改变时，如何使输入框重新渲染，以确保数据的正确性和用户体验。

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

1.Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，输入框都将被重新渲染。