Vue2 使用 v-if、v-else、v-else-if、v-show 以及 v-has 自定义指令实现条件渲染
提示：渲染就是显示
文章目录
- 前言
- 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>