vue关于元素复用问题举例分析

在这里插入图片描述

举个例子吧，一个非常简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

</head>
<body>
    <!-- 
        条件渲染指令
     -->
     <div id="app">
         <template v-if="type === 'name'">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名">
         </template>
         <template v-else>
            <label>密码：</label>
            <input type="password" placeholder="请输入密码">
         </template>
         <button @click="click">click me</button>
     </div>

     <script>
         var app = new Vue({
     
     
             el: '#app',
             data: {
     
     
                 type: 'name'
             },
             methods: {
     
     
                 click: function(){
     
     
                     this.type = this.type === 'name' ? 'password' : 'name';
                 }
             },
         })
     </script>
   
</body>
</html>

这个例子输入内容之后，点击切换按钮，虽然说DOM变了，但是之前输入框中的输入内容却没有变化，看起来就只是换了label和placeholder，这就说明< input>标签被复用了
但是说真的，很多时候我们不想要这种效果，我们可以使用vue提供的key属性
代码还是上面的代码，但是现在我们在input标签里加上不同的key值：

<template v-if="type === 'name'">
    <label>用户名：</label>
    <input type="text" placeholder="请输入用户名" key="name-input">
 </template>
 <template v-else>
    <label>密码：</label>
    <input type="password" placeholder="请输入密码" key="pwd-input">
 </template>

再次测试运行发现没问题啦，这里需要提醒一句，那就是key的值必须是唯一的

vue关于元素复用问题举例分析

猜你喜欢