vue用 key 管理可复用的元素_vue中给html元素加上key 值刷新页面结构-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_41445106/article/details/101062863

本文介绍在Vue中如何使用key属性管理元素的复用，通过示例代码展示了在切换不同输入框时，如何避免内容的保留及正确实现元素的独立切换。通过添加唯一key值，可以确保每次切换时输入框内容被清空，实现更符合实际需求的效果。

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

今天在看vue官网时对于用 key 管理可复用的元素部分效果实现时给的不是很完全，点击切换时应该怎么切换的问题，后来想到利用三目运算符来实现效果，下面给出详细代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <template v-if="loginType === 'username'">
            <label>Username</label>
            <input placeholder="Enter your username">
        </template>
        <template v-else>
            <label>Email</label>
            <input placeholder="Enter your email address">
        </template>
        <button @click="change">qiehuan</button>
    </div>
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                loginType:"username"
            },
            methods:{
                change(){
                    this.loginType =='username' ? this.loginType='password' : this.loginType='username'
                }
            }
        })
    </script>
      
</body>
</html>

在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，不会被替换掉——仅仅是替换了它的 placeholder。这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可，此时每次切换输入框都会重新渲染：
html部分代码如下：

    <div id="app">
        <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>
        <button @click="change">qiehuan</button>
    </div>