时间戳

首页 > 技术文章 > Vue v-if条件渲染

Vue v-if条件渲染

dyfbk 2017-05-16 14:35 原文

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>

输出结果：

 

推荐阅读