[Day17] 條件式 (v-if) 進階

第 12 屆 iThome 鐵人賽

DAY 17

Modern Web

少年學Vue，如隙中窺月系列第 17 篇

12th鐵人賽

Leo

2020-10-01 20:13:09

916 瀏覽

分享至

!否定用法

我們在 v-if 條件直接使用否定！用法，將 true 的條件式改成 false，當條件等於 true 就會顯示出成功的 div 區塊，反之則會顯示失敗的 div 區塊。我們也可以寫一個 checkbox 綁定 isSucceed 來更改 true 和 false。

<body>
    <div class="app">
        <div v-if="isSucceed">成功</div>
        <div v-if="!isSucceed">失敗</div>
        <input type="checkbox" v-model="isSucceed">更換
	  </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            isSucceed:false,
        },
    });
</script>

v-else

我們也可以使用 v-else，當 v-if 的條件不成立時，就會自動執行 v-else 的內容，而不用設定條件。

<body>
    <div class="app">
        <div v-if="isSucceed">成功</div>
        <div v-else>失敗</div>
        <input type="checkbox" v-model="isSucceed">更換
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            isSucceed:false,
        },
    });
</script>

v-if,v-if-else,v-else

如果我們遇到一個三選一的條件，或是需要製作分頁，就可以使用 v-if，v-if-else，v-else 來製作分頁。我們先宣告資料變數 page 來存放切換的分頁代表。並且設定三個按鈕 abc ，分別將它們綁定點擊事件，點擊後會改變 page 資料的值為指定分頁代表。最後我們設定三個 div 區塊 abc，當 page == a 代表條件成立，會出現 a 區塊，點按鈕 b ，條件式 b 會成立，會出現 b 區塊，點按鈕 c，條件式 c 會成立，會出現 c 區塊。

<body>
    <div class="app">
        <div v-if="page=='a'">a</div>
        <div v-else-if="page=='b'">b</div>
        <div v-else="page=='c'">c</div>
        <input type="button" value="a" @click="page='a'">
        <input type="button" value="b" @click="page='b'">
        <input type="button" value="c" @click="page='c'">
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            page:'a'
        },
    });
</script>

v-show

其實 v-show 和 v-if 的功能一樣，差別在於 v-show 是將條件式不成立的 div 區塊使用 dispaly:none 來隱藏，而 v-if 則是直接不會出現條件式不成立的區塊。

<body>
    <div class="app">
        <div v-show="isSucceed">成功</div>
        <div v-show="!isSucceed">失敗</div>
				<div v-if="isSucceed">成功</div>
        <div v-if="!isSucceed">失敗</div>
    </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:'.app',
        data:{
            isSucceed:false,
            page:'a'
        },
    });
</script>