Vue學習5：條件渲染

時間 2019-11-08

標籤 vue 學習條件渲染简体版

原文原文鏈接

上代碼：css

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue6</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <!--<link rel="stylesheet" type="text/css" href="main.css"/>-->
 8     <script src="vue.js"></script>
 9 </head>
10 <body>
11 <div id="app">
12     <!--v-if指令-->
13     <p v-if="seen>100">you can see me</p>
14     <p v-else-if="seen>50">or you can see me</p>
15     <p v-else-if="seen>10">you may see me</p>
16     <p v-else>well, you can only see me</p>
17     <!--注意：v-else、v-else-if必須跟在v-if或v-else-if後面-->
18 
19     <!--vue會盡量高速的渲染元素，一般是複用已有元素-->
20     <!--下面代碼中切換loginType不會清除已輸入的內容，由於兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder-->
21     <template v-if="loginType==='username' ">
22         <label for="um">username</label>
23         <input type="text" placeholder="enter username" id="um">
24     </template>
25     <template v-else>
26         <label for="email">email</label>
27         <input type="text" placeholder="enter email" id="email">
28     </template>
29     <button @click="ToggleLoginType">toggle login type</button>
30 
31     <br>
32 
33     <!--若是想表達「這兩個元素是獨立的，不要複用它們」，那麼使用key-->
34     <!--這樣每次切換時，輸入框都會被從新渲染-->
35     <template v-if="loginType==='username' ">
36         <label for="um1">username</label>
37         <input type="text" placeholder="enter username" id="um1" key="username">
38     </template>
39     <template v-else>
40         <label for="email1">email</label>
41         <input type="text" placeholder="enter email" id="email1" key="email">
42     </template>
43     <!--注意label仍然被高效複用，由於它沒有惟一值key-->
44 
45 
46     <!--v-show使用-->
47     <p v-show="shown">this will be shown</p>
48     <!--v-show不支持template元素，也不支持v-else-->
49 </div>
50 
51 
52 <script>
53     new Vue({
54         el: '#app',
55         data:{
56             seen: 11,
57             loginType: 'username',
58             shown: true
59         },
60         methods:{
61             ToggleLoginType:function(){
62                 if(this.loginType==='username'){
63                     this.loginType ='email';
64                 }else{
65                     this.loginType='username';
66                 }
67             }
68         }
69     })
70 </script>
71 </body>
72 </html>