1.虚拟DOM导致复用
使用key绑定不同内容来解决
下面代码：解决了输入框的内容在点击切换类型后还存在的情况
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="vue"> 10 <span v-if="isUser"> 11 <label for="username"> 用户账号</label> 12 <input type="text" id="username" placeholder="用户账户" key="username"> 13 </span> 14 <span v-else> 15 <label for="email"> 用户邮箱</label> 16 <input type="text" id="email" placeholder="用户邮箱" key="email"> 17 </span> 18 <button @click="isUser = !isUser">切换类型</button> 19 </div> 20 21 <!--导入Vue.js--> 22 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 23 <script type="text/javascript"> 24 let vm = new Vue({ 25 el: '#vue', 26 data: { 27 isUser: true 28 } 29 30 31 }); 32 </script> 33 </body> 34 </html>
2.v-if和v-show区别
-
v-if：当条件为false时，将元素从DOM中删除，当条件为true时，再创建元素放入DOM中
-
v-show：当条件为false时，只是将行内样式设置为：display: none
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <div id="vue"> 10 <span v-if="isUser"> 11 <label for="username"> 用户账号</label> 12 <input type="text" id="username" placeholder="用户账户" key="username"> 13 </span> 14 <span v-else> 15 <label for="email"> 用户邮箱</label> 16 <input type="text" id="email" placeholder="用户邮箱" key="email"> 17 </span> 18 <button @click="isUser = !isUser">切换类型</button> 19 20 <br> 21 <!--v-if：当条件为false时，将元素从DOM中删除，当条件为true时，再创建元素放入DOM中--> 22 <h2 v-if="isShow" id="v-if">{{message}}</h2> 23 <!--v-show：当条件为false时，只是将行内样式设置为：display: none--> 24 <h2 v-show="isShow" id="v-show">{{message}}</h2> 25 </div> 26 27 <!--导入Vue.js--> 28 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script> 29 <script type="text/javascript"> 30 let vm = new Vue({ 31 el: '#vue', 32 data: { 33 message: "test v-if and v-show", 34 isUser: true, 35 isShow: true 36 } 37 38 39 }); 40 </script> 41 </body> 42 </html>