v-if與v-show的用法與區(qū)別

標(biāo)簽： vue

  • vue中顯隱方法常用兩種，v-show和v-if，但這兩種是有區(qū)別的。
  • 實現(xiàn)本質(zhì)方法區(qū)別
    • vue-show本質(zhì)就是標(biāo)簽display設(shè)置為none，控制隱藏
    • vue-if是動態(tài)的向DOM樹內(nèi)添加或者刪除DOM元素
  • 編譯的區(qū)別
    • v-show其實就是在控制css
    • v-if切換有一個局部編譯/卸載的過程，切換過程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽和子組件
  • 編譯的條件
    • v-show都會編譯，初始值為false，只是將display設(shè)為none，但它也編譯了
    • v-if初始值為false，就不會編譯了
  • 性能
    • v-show只編譯一次，后面其實就是控制css，而v-if不停的銷毀和創(chuàng)建，故v-show性能更好一點。
  • 用法
    • v-if更靈活，舉個例子
//這個里面只會顯示數(shù)組角標(biāo)大于等于2的內(nèi)容
  <li v-for="(item, index) in scene" v-if="index <= 2" @click="openScene(item, item.pid)">
      <span>{{ item.name }}</span>
  </li>

 //這個上面為true的內(nèi)容，下面為false的內(nèi)容（當(dāng)然這個也可以用v-show實現(xiàn)的）
 <li v-for="(item, index) in scene" v-if="item.share" @click="openScene(item, item.pid)">
     <span>{{ item.share }}</span>
 </li>
 <li v-else>
      <span>{{ item.share }}</span>
 </li>

如果你的頁面不想讓其他程序員看到就用v-if，它不會在頁面中顯示。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容