Vue-(七)條件判斷

7-1.v-if (影片)

補充:
本身並非元素，只是用來包著許多元素的模板

<div id="app">
  <input type="checkbox" v-model="show"/>勾選秀出內容
  <templete v-if="show">
    <h1>{{message}}</h1>
    <h2>{{message}}</h2>
    <h3>{{message}}</h3>
  </templete>
</div>

new Vue({
  el:'#app',
  data:{
    message:'跳樓大拍賣',
    show:false,
  },
})

---

7-2.v-else (影片)

v-else一定要依附在v-if之後，且是同一層的東西

<div id="app">
  <input type="checkbox" v-model="show"/>
  <span v-if='show'>隱藏內容</span>
  <span v-else>秀出內容</span>
  <templete v-if="show">
    <h1>{{message}}</h1>
    <h2>{{message}}</h2>
    <h3>{{message}}</h3>
  </templete>
</div>

==如果中間有其他東西，v-else會無效

<div id="app">
  <input type="checkbox" v-model="show"/>
  <span v-if='show'>隱藏內容</span>
  <br/>//錯誤：不得再v-if/v-else插入其他東西，會出錯
  <span v-else>秀出內容</span>
  <templete v-if="show">
    <h1>{{message}}</h1>
    <h2>{{message}}</h2>
    <h3>{{message}}</h3>
  </templete>
</div>

---

7-3.v-else-if (影片)

v-if若有成立，就不會render下面的v-else-if與v-else

<div id="app">
  <input type="checkbox" v-model="showRed"/>red
  <input type="checkbox" v-model="showGreen"/>green
  <input type="checkbox" v-model="showBlue"/>blue
  <h1 v-if="showRed">I'm Red.</h1>
  <h1 v-else-if="showGreen">I'm Green.</h1>
  <h1 v-else-if="showBlue">I'm Blue.</h1>
  <h1 v-else>Non</h1>
</div>

new Vue({
  el:'#app',
  data:{
   showRed:false,
    showGreen:false,
    showBlue:false,
  },
})

---

7-4.v-show (影片)

• v-if是讓程式判斷是否被render出來
• v-show是用css控制是否在畫面中顯示(意即套用display: none)，所以該元素在原始碼中有被render出來，只是不在畫面顯示

• 可以搭配v-if使用，代表裡面的東西是否render出來;但是不能用v-show，因為本身並非一個元素，只是一個模板，無法被顯示處理