4.v-if

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>