Vue_ 統整判斷式

本文总阅读量次

v-show

  • v-if是讓程式判斷是否被render出來
  • v-show是用css控制是否在畫面中顯示(意即套用display: none)，所以該元素在原始碼中有被render出來，只是不在畫面顯示
  • 可以搭配v-if使用，代表裡面的東西是否render出來;但是不能用v-show，因為本身並非一個元素，只是一個模板，無法被顯示處理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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,
  },
})

v-else

  • v-else一定要依附在v-if之後，且是同一層的東西
  • ==如果中間有其他東西，v-else會無效
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<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>

<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>

v-else-if

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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,
  },
})

注意事項

v-for與v-if 優先權的比較
  • v-for的優先權高於v-if，因此當兩者皆出現在同一個元素上時，v-if會隨著v-for重覆執行數次。
  • 建議將v-for與v-if放不同標籤裡。