提示：渲染就是顯示
文章目錄
- 前言
- v-if 的基礎用法
- v-else
- v-else-if
- v-show 和 v-if 對比
- 自定義指令 v-has
- v-if 和 v-has 結合使用場景
- 完整示例
- 補充說明
前言
提示：這里可以添加本文要記錄的大概內容：
在 Vue2 中，可以通過 v-if 和自定義指令（如 v-has）實現靈活的條件渲染。以下是具體實現和示例：
v-if 的優先級高于 v-has，因此 v-if 的條件必須先成立，v-has 才會生效。
v-if 的基礎用法
v-if 根據表達式的布爾值決定是否渲染元素。若表達式為 false，元素會被完全移除 DOM。適合用于不頻繁切換顯示狀態的場景，如果條件頻繁變化，建議改用 v-show，因為 v-show 只是通過 CSS 控制顯示/隱藏，避免頻繁操作 DOM。
【例1】
<div v-if="showFlag">
這段代碼的功能是通過 v-if 指令動態控制一個 div 元素的顯示與隱藏。當 showFlag 的值為 true 時，div 元素會被渲染到頁面上；當 showFlag 的值為 false 時，div 元素不會被渲染。
【例2】
<template v-if='showFlag=== 1'>
判斷：showFlag是否等于 1
是→渲染模板內容
否→不渲染模板內容
v-else
一般不單獨存在，一般和v-if或者v-else-if一起使用；
<body><div id="app"><p v-if="ok">Yes</p><p v-else>No</p><button @click="toggle()">切換</button></div><script>// 創建 Vue 實例const vm = new Vue({el: "#app",data: {ok: false, // 控制條件渲染},methods: {toggle() {this.ok = !this.ok; // 切換 ok 的值}}});</script>
</body>
-
條件渲染：
- 使用
v-if="ok"和v-else來控制顯示 “Yes” 或 “No”。 - 當
ok為true時，顯示 “Yes”；當ok為false時，顯示 “No”。
- 使用
-
事件綁定：
- 使用
@click="toggle()"綁定按鈕點擊事件。 - 點擊按鈕時會調用
toggle()方法，切換ok的值（在true和false之間切換）。
- 使用
-
數據綁定：
data中定義了ok屬性，默認值為false。- 點擊按鈕后，
ok的值會被取反，從而觸發視圖更新。
-
測試結果
- 頁面初始狀態會顯示 “No”，因為
ok的默認值為false。 - 點擊 “切換” 按鈕后，
ok的值變為true，頁面會顯示 “Yes”。 - 再次點擊按鈕，
ok的值變為false，頁面會切換回 “No”。
- 頁面初始狀態會顯示 “No”，因為
v-else-if
指令時多分支判斷
<div id="app"><div v-if="type === 'A'">Type A</div><div v-else-if="type === 'B'">Type B</div><div v-else-if="type === 'C'">Type C</div><div v-else>Not A, B, or C</div>
</div><script>var wue = new Vue({el: '#app',data: {type: 'A'}});
</script>
-
HTML 部分：
- 根據
type的值，Vue 會動態渲染對應的<div>。 - 如果
type是'A'，則顯示 “Type A”。 - 如果
type是'B'，則顯示 “Type B”。 - 如果
type是'C'，則顯示 “Type C”。 - 如果
type不是以上任何一種情況，則顯示 “Not A, B, or C”。
- 根據
-
JavaScript 部分：
- Vue 實例綁定了
#app元素，并定義了兩個數據屬性：type: 'A'（當前值為'A'，因此會顯示 “Type A”）。
- Vue 實例綁定了
v-show 和 v-if 對比
v-show 也是用于根據條件展示元素。和v-if不同的是，如果v-if的值是false，則這個元素被銷毀，不在dom中。但是v-show的元素會始終被渲染并保存在dom中，它只是簡單的切換css的dispaly屬性。
注意：v-if有更高的切換開銷
v-show有更高的初始渲染開銷。
<body><div id="app"><p v-if="flag">晴天</p><hr><p v-show="flag">心情好</p><button @click="flag = !flag">切換</button></div><script>var app = new Vue({el: '#app',data: {flag: true // 初始值為 true}});</script>
</body>
- 頁面加載時，顯示：
晴天-----心情好
- 點擊 “切換” 按鈕后，
flag的值變為false，頁面更新為：
-----
- 再次點擊 “切換” 按鈕，
flag的值變為true，頁面恢復為：
晴天-----心情好
v-if條件渲染：條件滿足，dom元素顯示，若條件不滿足，dom原始被刪除了；是對dom元素操作的；
v-show 渲染：條件滿足，dom元素style=display:none來顯示原始的顯示和隱藏的；
如果要非常頻繁的切換，則使用v-show較好；如果在運行時條件不太可能改變，則v-if較好
自定義指令 v-has
組件中使用v-has根據按鈕權限，判斷是否顯示該按鈕
<!-- 需要 create 權限的按鈕 --><button v-has="'buyCarList:create'" @click="handleCreate">新 建</button>
v-has="'buyCarList:create'"
v-has 是一個自定義指令，用于權限控制，動態判斷用戶是否有某個權限。
通常會結合用戶的權限列表（如從后端獲取的權限數據）來判斷是否渲染元素，如果用戶沒有 buyCarList:create 權限，則該按鈕不會被渲染到頁面上。
也就是說前端權限控制僅用于 UI 層隱藏，實際接口調用仍需后端驗證，防止越權操作
具體邏輯通常在全局指令中定義，例如：
- 檢查當前用戶的權限列表。
- 如果權限列表中包含
buyCarList:create，則渲染該按鈕。 - 如果不包含，則隱藏該按鈕。
v-if 和 v-has 結合使用場景
完整示例
<template><div><!-- 普通條件渲染 --><p v-if="showWelcome">歡迎回來，{{ userName }}！</p><!-- 權限控制 --><button v-has="'create'">新建文章</button><button v-has="'delete'" v-if="selectedItem">刪除選中項</button><!-- 權限 + 角色雙重驗證 --><div v-if="user.role === 'admin'" v-has="'audit'">審核功能</div><!-- v-else 配合使用 --><div v-if="isLoading">加載中...</div><div v-else>數據加載完成</div></div>
</template><script>
export default {data() {return {showWelcome: true,userName: 'Alice',selectedItem: null,user: { role: 'editor' }};}
};
</script>
- 普通條件渲染
<p v-if="showWelcome">歡迎回來，{{ userName }}！</p>
- 功能：通過
v-if指令控制一段文本的顯示與隱藏。 - 邏輯：
- 當
showWelcome的值為true時，顯示<p>標簽中的內容。 - 當
showWelcome的值為false時，該段內容不會被渲染到 DOM 中。
- 當
- 數據綁定：
userName是一個動態變量，用于顯示用戶的名稱（如 “Alice”）。
- 應用場景：適合用于登錄后歡迎信息的顯示或頁面加載后的提示信息。
- 權限控制
<button v-has="'create'">新建文章</button>
<button v-has="'delete'" v-if="selectedItem">刪除選中項</button>
- 功能：通過自定義指令
v-has控制按鈕是否顯示，結合v-if實現更復雜的條件判斷。 - 邏輯：
- 第一個按鈕：只有當用戶擁有
'create'權限時，才會顯示“新建文章”按鈕。 - 第二個按鈕：不僅需要用戶擁有
'delete'權限，還需要滿足selectedItem不為空的條件（即有選中項時才顯示“刪除選中項”按鈕）。
- 第一個按鈕：只有當用戶擁有
- 應用場景：
- 權限控制：確保用戶只能看到自己有權訪問的功能按鈕。
- 狀態依賴：結合其他條件（如是否有選中項）進一步細化顯示邏輯。
- 權限 + 角色雙重驗證
<div v-if="user.role === 'admin'" v-has="'audit'">審核功能</div>
- 功能：結合角色和權限進行雙重驗證，只有同時滿足條件時才會顯示特定內容。
- 邏輯：
- 首先檢查
user.role是否為'admin'（管理員角色）。 - 再通過
v-has檢查用戶是否擁有'audit'（審核）權限。 - 只有當這兩個條件都成立時，才會顯示“審核功能”相關內容。
- 首先檢查
- 應用場景：
- 多層次權限管理：既要求用戶具有特定角色，又要求具備某些具體權限。
- 適用于復雜的企業級應用，例如后臺管理系統。
v-else配合使用:
<div v-if="isLoading">加載中...</div><div v-else>數據加載完成</div>
v-else必須緊跟在v-if或v-else-if后面。- 當
isLoading為true時，顯示“加載中…”。 - 當
isLoading為false時，顯示“數據加載完成”。
補充說明
v-if和v-show的區別:v-if是基于條件動態地添加或移除 DOM 元素。v-show則是通過 CSS 的display屬性來控制元素的顯示 / 隱藏。- 如果需要頻繁切換顯示狀態，推薦使用
v-show，因為它不會頻繁操作 DOM。
示例：
<p v-show="showMessage">這是通過 v-show 顯示的消息</p>
-
復雜條件判斷:
如果條件邏輯更復雜，可以考慮使用計算屬性來簡化模板中的邏輯。示例：
<button v-if="isAdmin">管理員操作</button>
computed: {isAdmin() {return this.user.role === 'admin';}}
-
v-else-if的使用:
如果有多個條件分支，可以使用v-else-if。示例：
<div v-if="score > 90">優秀</div><div v-else-if="score > 60">及格</div><div v-else>不及格</div>
)
