Vue v-if條件渲染

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

 <!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">
    <div v-if="Math.random() > 0.5">
        Now you see me
    </div>
    <div v-else>
        Now you don't
    </div>

    <div v-if="num==10">
        num = {{num}}
    </div>
    <div v-else>
        num != 10
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            num:10
    }
    })
</script>
</html>

3、v-else-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="app">
    {{message}}
    <div v-if="message==='A'">
        str = {{message}}
    </div>
    <div v-else-if="message==='B'">
        str = {{message}}
    </div>
    <div v-else-if="message==='C'">
        str = {{message}}
    </div>
    <div v-else>
        str = null
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            message: 'B'
    }
    })
</script>
</html>

輸出結果:
4、用key管理可複用元素

先看看不用key管理可複用元素的代碼。Vue 會儘可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做，除了使 Vue 變得非常快之外，還有一些有用的好處，那就是在切換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" >
    </span>
    <span v-else>
        <label>Email</label>
        <input placeholder="Enter your email address" >
    </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>

使用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 不支持語法，也不支持 v-else。

　　兩者之間的區別：

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

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

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

　　v-show:1.不管條件是true還是false都會進行渲染。並且只是簡單地基於 CSS 進行切換

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

v-show的代碼示例如下：

<!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">
   <div v-show="flag">
       you can see me
   </div>

</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            flag: true
         }
    })
</script>
</html>

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

<!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">
   <div v-for="message in messageList" v-if="message.test == 'vue.js'">
      {{message.test}}
   </div>
    <br>------------完美的分隔線--------------</br>
    <div v-for="message in messageList">
        <span v-if="message.test == 'vue.js'">{{message.test}}是一種很好用的前臺框架</span>
        {{message.test}}
    </div>
</div>
</body>
    <script>
    var vm = new Vue({
        el:"#app",
        data:{
            messageList: [
                {test:'java'},
                {test:'vue.js'},
                {test:'liunx'}
            ]
         }
    })
</script>
</html>