v-if、v-else、v-else-if、v-show

Posted on Edited on In Views: Disqus:

 

一、v-if

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <p v-if="character == 'a'">I'm a</p>
        <p v-if="character == 'b'">I'm b</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                character: "a"
            }
        })
    </script>
</body>

</html>

執行結果

 

二、v-else-if

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <p v-if="character == 'a'">I'm a</p>
        <p v-else-if="character == 'b'">I'm b</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                character: "b"
            }
        })
    </script>
</body>

</html>

執行結果

 

二、v-else

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <p v-if="character == 'a'">I'm a</p>
        <p v-else-if="character == 'b'">I'm b</p>
        <p v-else>I'm {{character}}</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                character: "c"
            }
        })
    </script>
</body>

</html>

執行結果

說明：

v-else 一定是依附在 v-if 或 v-else-if 的元素之後，

不能在中間穿插別的東西，如果不是連在一起的話就會失效。

 

四、v-show

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <p v-show="character == 'a'">I'm a</p>
        <p v-show="character == 'b'">I'm b</p>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: {
                character: "b"
            }
        })
    </script>
</body>

</html>

執行結果

 

說明：

1、v-if 和 v-show 效果相同，差異在於是否有 else 的狀況。

2、v-show 會先把所有的元素都渲染出來，然後再用 display:none

來隱藏不符合的條件。

3、v-show 不能用於 <template>，但 v-if 可以。