iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
自我挑戰組

Vue.js 從零開始系列 第 13

Vue.js 從零開始:v-if,v-show

條件判斷 v-if v-show

v-ifv-show 的區別

<div id="app">
  <input type="checkbox" v-model="isShow">
  <div v-if="isShow">
    <p>v-if</p>
  </div>
  <div v-show="isShow">
    <p>v-show</p>
  </div>
</div>
const vm = Vue.createApp({
  data() {
    return {
      isShow: true,
    }
  }
}).mount('#app')

v-model 雙向綁定 dataisShow ,當 isShowtrue 時,v-ifv-show 會顯示,
false 比較特別,v-if 是整個元素都消失,v-show則變成display:none隱藏起來:
https://ithelp.ithome.com.tw/upload/images/20210923/20118347wEZTUYo5gG.png
dataisShow 值為: true
https://ithelp.ithome.com.tw/upload/images/20210923/20118347UIFRI33dxv.png
dataisShow 值為: falsev-show 始終都會保留在 DOM 中,v-if 是真正的條件渲染,依據條件,銷毀或是重建。


v-else

<div  v-if="value === A">A</div>
<div  v-else>B</div>

v-else 元素必須接在 v-ifv-else-if,才能確保 v-else 是預期產生出來的元素。

v-else-if

<div  v-if="total === 0"> {{ total }} </div>
<div  v-else-if="total > 5" style="background-color: blue;"> {{ total }} </div>
<div  v-else="total > 10" style="background-color: red;"> {{ total }} </div>

v-else-if 也是必須接在 v-if 之後,v-else-if = "條件" ,相當於 JavaScript 的 else if(條件)。


如上述有問題,請不吝給予指教 /images/emoticon/emoticon41.gif

參考資料

重新認識 Vue.js
Vus.js 官網


上一篇
Vue.js 從零開始:v-on
下一篇
Vue.js 從零開始:v-for
系列文
Vue.js 從零開始30

尚未有邦友留言

立即登入留言