Vue v-if條件渲染

本文轉載自查看原文 2017-05-16 14:35 114122 Vue.js

1、簡單的v-if指令，代碼如下

<!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的值。

2、v-else

 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>

3、v-else-if

 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>

輸出結果:

4、用key管理可復用元素

先看看不用key管理可復用元素的代碼。Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做，除了使 Vue 變得非常快之外，還有一些有用的好處，那就是在切換input時不會清楚里面的數據。

 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時里面的數據會被清除。

<!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>

5、v-show & v-if

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

　　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>

6、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>

輸出結果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Vue條件渲染（v-if） VUE指令條件渲染v-if vue 條件渲染 v-if v-show vue v-if條件判斷 vue-學習筆記-條件渲染(v-if,v-show等) vue中用v-for的item屬性作為v-if組件渲染條件時不起作用 vue.js條件渲染 v-if else-if v-for [vue]vue條件渲染v-if(template)和自定義指令directives [Vue]條件與循環v-if v-for(二) vue之條件判斷v-if與v-show