---

標簽

<div v-for="item in list" v-if="item.isShow">{{item.name}}</div>
<div v-for="item in list" v-show="item.isShow">{{item.name}}</div>
<div v-for="item in list" :style="{ display: item.isShow? '' : 'none' }">{{item.name}}</div>
<div v-for="item in list" :hidden="!item.isShow">{{item.name}}</div>
<div v-for="item in list" :style="{ visibility: item.isShow? 'visible' : 'hidden' }">{{item.name}}</div>

---

區別速覽

序號	寫法	渲染到DOM	占位	響應性	性能	推薦指數	說明
1	v-if	? 不渲染	? 不占位	高（增刪）	低（頻繁銷毀/重建）	?? 低	每個item.isShow=false的元素根本不會出現在DOM中，適合頻繁切換不推薦
2	v-show	? 渲染	? 不占位	高	高（僅切換 CSS）	? 高	DOM始終存在，只是通過display: none切換，可用于頻繁切換可見性
3	:style=“display”	? 渲染	? 不占位	高	高	? 高	和v-show本質一致，更靈活（可配合過渡/動畫）
4	:hidden	? 渲染	? 不占位（某些瀏覽器）	中（兼容性一般）	高	?? 中	HTML原生hidden屬性，有兼容性差異（如 IE），不推薦用于復雜布局
5	:style=“visibility”	? 渲染	? 占位	高	高	?? 中偏低	元素不可見但仍然占空間，適合需要保留布局占位但不顯示內容的場景

---

詳解

? v-if

<div v-for="item in list" v-if="item.isShow">{{item.name}}</div>

邏輯層判斷：如果isShow=false，就不渲染該DOM元素。
Vue編譯優化：Vue在每次更新時會銷毀/創建DOM節點。
性能影響：對于頻繁切換的列表，v-if性能較差（會頻繁插入/刪除DOM）。
作用域問題：v-if的判斷發生在v-for外層，Vue官方建議避免同標簽同時使用v-if與v-for，會導致作用域錯亂（應放在<template>上）。
?適合：只渲染一次或很少改變顯示狀態的內容（如首次加載/權限判斷）

---

? v-show

<div v-for="item in list" v-show="item.isShow">{{item.name}}</div>

DOM元素始終存在；
Vue只是動態加上或移除display: none；
更新快，性能好。
?適合：需要頻繁切換顯示狀態的場景（如切換tab、展開折疊）

---

? :style=“{ display: … }”

<div v-for="item in list" :style="{ display: item.isShow ? '' : 'none' }">{{item.name}}</div>

與v-show類似，控制的是CSS顯示狀態；
更靈活，可綁定多個樣式，也可使用動畫庫或寫自定義transition；
適合在v-for這種循環內做粒度更細的控制。
?推薦用法，兼顧靈活性與性能

---

?? :hidden

<div v-for="item in list" :hidden="!item.isShow">{{item.name}}</div>

控制HTML的hidden屬性（布爾值）；
行為接近display: none；
某些老瀏覽器（如IE、舊版Edge）對hidden支持不好；
不能做動畫，CSS控制也較差。
??不推薦在復雜布局中使用，簡單項目可用

---

?? :style=“{ visibility: … }”

<div v-for="item in list" :style="{ visibility: item.isShow ? 'visible' : 'hidden' }">{{item.name}}</div>

DOM始終存在；
元素隱藏但仍然占據空間（對布局有影響）；
可以搭配opacity做過渡動畫。
?適合：希望“保留位置”但臨時不顯示的內容
例如：橫向滾動條下的輪播項、等高柵格系統。

---

總結

場景	推薦方式
靜態控制顯示，頁面首次加載是否渲染	v-if
頻繁切換可見性（如 tab 切換）	v-show或:style=“display”
需要控制多個樣式或結合動畫	:style更靈活
只想快速隱藏并支持原生 hidden 屬性	:hidden（輕量項目可用）
需要隱藏但保留占位	visibility: hidden

如果在表格、網格、動態列表等復雜場景中使用，推薦優先考慮：
1、:style="{ display: item.isShow ? '' : 'none' }" 通用又安全
2、或v-show（只在v-for的子元素中使用）