Vue v-if條件渲染

時間 2019-11-24

標籤 vue 條件渲染简体版

原文原文鏈接

一、簡單的v-if指令，代碼以下javascript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
    <div id="id">
        <span v-if="flag">
           若是flag爲true則顯示,false不顯示!
        </span>
    </div>
</body>
<script>
    var vm = new Vue({
        el:"#id",
        data:{
            flag:true
        }
    })
</script>
</html>

在控制檯能夠改變flag的值。html

二、v-elsevue

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <div v-if="Math.random() > 0.5">
11         Now you see me
12     </div>
13     <div v-else>
14         Now you don't
15     </div>
16 
17     <div v-if="num==10">
18         num = {{num}}
19     </div>
20     <div v-else>
21         num != 10
22     </div>
23 </div>
24 </body>
25     <script>
26     var vm = new Vue({
27         el:"#app",
28         data:{
29             num:10
30     }
31     })
32 </script>
33 </html>

三、v-else-ifjava

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     {{message}}
11     <div v-if="message==='A'">
12         str = {{message}}
13     </div>
14     <div v-else-if="message==='B'">
15         str = {{message}}
16     </div>
17     <div v-else-if="message==='C'">
18         str = {{message}}
19     </div>
20     <div v-else>
21         str = null
22     </div>
23 </div>
24 </body>
25     <script>
26     var vm = new Vue({
27         el:"#app",
28         data:{
29             message: 'B'
30     }
31     })
32 </script>
33 </html>

輸出結果:app

四、用key管理可複用元素框架

先看看不用key管理可複用元素的代碼。Vue 會盡量高效地渲染元素，一般會複用已有元素而不是從頭開始渲染。這麼作，除了使 Vue 變得很是快以外，還有一些有用的好處，那就是在切換input時不會清楚裏面的數據。dom

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10     <span v-if="loginType === 'username'">
11         <label>Username</label>
12         <input placeholder="Enter your username" >
13     </span>
14     <span v-else>
15         <label>Email</label>
16         <input placeholder="Enter your email address" >
17     </span>
18     <button v-on:click="test">切換</button>
19 </div>
20 </body>
21     <script>
22     var vm = new Vue({
23         el:"#app",
24         data:{
25             loginType: 'username'
26          },
27         methods:{
28             test:function(){
29                 if(this.loginType != 'username'){
30                     return this.loginType = 'username'
31                 }
32                 return this.loginType = 'email'
33             }
34         }
35     })
36 </script>
37 </html>

我麼再看看使用key管理可複用元素。添加key屬性，則這兩個元素是相互獨立，再也不復用。這樣當咱們在切換input時裏面的數據會被清除。this

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript"  src="vue.js"></script>
</head>
<body>
<div id="app">
    <span v-if="loginType === 'username'">
        <label>Username</label>
        <input placeholder="Enter your username" key="username-input">
    </span>
    <span v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" key="email-input">
    </span>
    <button v-on:click="test">切換</button>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            loginType: 'username'
         },
        methods:{
            test:function(){
                if(this.loginType != 'username'){
                    return this.loginType = 'username'
                }
                return this.loginType = 'email'
            }
        }
    })
</script>
</html>

五、v-show & v-ifspa

　　v-show也是根據條件展現元素的指令。帶有 v-show 的元素始終會被渲染並保留在 DOM 中。v-show 是簡單地切換元素的 CSS 屬性 display 。code

　　v-show 不支持 <template> 語法，也不支持 v-else。

　　二者之間的區別：

　　v-if :1.是真正的條件渲染，由於它會確保在切換過程當中條件塊內的事件監聽器和子組件適當地被銷燬和重建。

　　　　 2.是惰性的，只有當條件爲true時纔會渲染，若是條件爲false則什麼都不作

　　　　 3.有很高的切換開銷，適用於條件不太容易改變的時候

　　v-show:1.無論條件是true仍是false都會進行渲染。而且只是簡單地基於 CSS 進行切換

　　　　　 2.有很高的初始渲染開銷，適用於很是頻繁地切換

v-show的代碼示例以下：

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10    <div v-show="flag">
11        you can see me
12    </div>
13 
14 </div>
15 </body>
16     <script>
17     var vm = new Vue({
18         el:"#app",
19         data:{
20             flag: true
21          }
22     })
23 </script>
24 </html>

六、v-if 和v-for 混合使用示例

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <script type="text/javascript"  src="vue.js"></script>
 7 </head>
 8 <body>
 9 <div id="app">
10    <div v-for="message in messageList" v-if="message.test == 'vue.js'">
11       {{message.test}}
12    </div>
13     <br>------------完美的分隔線--------------</br>
14     <div v-for="message in messageList">
15         <span v-if="message.test == 'vue.js'">{{message.test}}是一種很好用的前臺框架</span>
16         {{message.test}}
17     </div>
18 </div>
19 </body>
20     <script>
21     var vm = new Vue({
22         el:"#app",
23         data:{
24             messageList: [
25                 {test:'java'},
26                 {test:'vue.js'},
27                 {test:'liunx'}
28             ]
29          }
30     })
31 </script>
32 </html>

輸出結果：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。