今天是第十五天，前面我們分享了一些Vue.js指令的簡單實作，
那今天我想簡單介紹一下以下指令v-if ,v-else,v-else-if

v-if
它會基於表達式數值的真假性，有條件地渲染元素或模板片段。
如果指令的表達式回傳的數值為true，會顯示內部數值，
反之是false，就不會顯示其內容。

v-else
可以用來表示不滿足v-if的表達式數值，例如：回傳的數值為false，
便可以對v-else定義條件，將false值顯示。

v-else-if
可以被鏈接多次。

注意:v-else ,v-else-if這兩個指令前面必須要有v-if ,v-else-if

來寫程式吧

這裡是HTML的部分

<div id="app">
    <button @click="this.hi =!this.hi">click it</button>
    <div v-if ="hi">Hello</div>
    <div v-else>Bye</div>
</div>

這裡是JS的部分

<script>
    const vm = Vue.createApp({
    data(){
        return{
            hi:true,
            }
        }
    }).mount('#app');
</script>

透過按下按鈕,hi這個值會在true和false之間反覆切換，
就能看到Hello跟Bye兩個結果

v-if ,v-else就分享到這邊，明天可能會補一個v-if ,v-else,v-else-if的實作應用，
我們第十六天見