网站建设环境搭建心得体会_现代简约装修三室两厅两卫样_网站申请_搜索引擎营销的作用

提示：渲染就是显示

文章目录

前言
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”。

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”）。

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>

网站建设环境搭建心得体会_现代简约装修三室两厅两卫样_网站申请_搜索引擎营销的作用

文章目录

前言

v-if 的基础用法

v-else

v-else-if

v-show 和 v-if 对比

自定义指令 v-has

v-if 和 v-has 结合使用场景

完整示例

补充说明

最新新闻

热搜词