Vue-条件渲染（初识vue渲染）

目录

一、Vue条件渲染-介绍

1.概念

2.特点

3.功能

4.好处

5.应用

 二、Vue条件渲染-使用

1.初识渲染

2.条件v-if的使用

3.条件v-if-else的使用

4.条件v-else-if使用

5.template元素使用

6.条件渲染-阶段案例

7.条件v-show

三、Vue条件渲染-实例

1.权限管理系统

2.动态表单验证

3.动态路由权限控制

四、总结

一、Vue条件渲染-介绍

Vue 的条件渲染是指根据数据的不同状态来动态地显示或隐藏 DOM 元素的一种技术。通过条件渲染，你可以根据特定的条件决定是否渲染特定的 DOM 元素，以实现更灵活、交互性更强的用户界面。

1.概念

条件渲染是 Vue.js 中的一项核心特性，它允许你基于应用的状态来动态地显示或隐藏 DOM 元素。通过在模板中使用 Vue 的指令，你可以轻松地根据数据的不同值来决定 DOM 元素是否被渲染到页面上。

2.特点

  • 灵活性：条件渲染使得页面元素的显示与否可以根据数据的变化而动态调整，从而实现灵活的交互效果。
  • 简洁性：通过 Vue 提供的指令，实现条件渲染的代码通常比传统的 JavaScript 操作 DOM 更为简洁明了。
  • 响应式：Vue 的条件渲染是响应式的，即当数据发生变化时，页面会自动重新渲染以反映最新的状态。

3.功能

  • v-if 指令：根据表达式的值的真假来决定是否渲染元素。
  • v-else 指令：在 v-if 指令的后面使用，表示前面的条件不满足时执行的渲染。
  • v-else-if 指令：用于在 v-if 指令的后面添加额外的条件。
  • v-show 指令：根据表达式的值的真假来切换元素的 CSS display 属性。

4.好处

  • 交互性增强：条件渲染使得页面在不同的情况下可以展现不同的内容，增强了用户与页面的交互性。
  • 数据驱动：Vue 的条件渲染是基于数据的状态来决定的，使得页面的渲染更加符合数据驱动的原则。
  • 简化逻辑：通过条件渲染，可以将一些复杂的逻辑判断移到模板层，使得代码更加清晰简洁。

5.应用

条件渲染在 Vue 中的应用非常广泛，常见的场景包括：

  • 根据用户的登录状态显示不同的导航菜单。
  • 根据数据列表是否为空显示不同的提示信息。
  • 根据用户的权限动态显示或隐藏某些功能按钮。
  • 根据表单输入的内容验证结果来显示错误提示信息。

总之，条件渲染是 Vue.js 中非常重要的一项特性，它使得开发者能够根据数据的变化来动态地控制页面的显示，从而实现更加灵活、交互性更强的用户界面。

 二、Vue条件渲染-使用

1.初识渲染

完成以下需求demo，请求数据并展示在页面上

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!--模版语法--><div id="app"><ul v-if="names.length>0"><li v-for="item in names">{{item}}</li></ul><h2 v-else>当前names没有数据，请求获取数据后展示</h2></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {// names: ["abc", "cba", "nba"]names:[]}},})app.mount("#app")</script>
</body></html>

2.条件v-if的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- v-if = "条件" --><div class="info" v-if="Object.keys(info).length"><h2>个人信息</h2><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata() {return {info: {name:"why",age:18}}},})app.mount("#app")</script>
</body></html>

3.条件v-if-else的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- v-if = "条件" --><div class="info" v-if="Object.keys(info).length"><h2>个人信息</h2><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></div><!-- v-else --><div v-else><h2>没有输入个人信息</h2><p>请输入个人信息后，在进行展示</p></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata() {return {info: {name:"why",age:18}}},})app.mount("#app")</script>
</body></html>

4.条件v-else-if使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1 v-if="score>90">优秀</h1><h2 v-else-if="score>80">良好</h2><h3 v-else-if="score>=60">及格</h3><h4 v-else>不及格</h4></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {score: 88}},})app.mount("#app")</script>
</body></html>

5.template元素使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- v-if = "条件" --><template v-if="Object.keys(info).length"><h2>个人信息</h2><ul><li>姓名：{{info.name}}</li><li>年龄：{{info.age}}</li></ul></template><!-- v-else --><template v-else><h2>没有输入个人信息</h2><p>请输入个人信息后，在进行展示</p></template></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata() {return {info: {name:"why",age:18}}},})app.mount("#app")</script>
</body></html>

6.条件渲染-阶段案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 200px;height: 200px;}</style>
</head><body><div id="app"><div><button @click = "toggle">切换</button></div><template v-if = "isShowCode"><img src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif" alt=""></template></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {isShowCode:true}},methods:{toggle(){this.isShowCode = !this.isShowCode}}})app.mount("#app")</script>
</body></html>

7.条件v-show

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img {width: 200px;height: 200px;}</style>
</head><body><div id="app"><div><button @click = "toggle">切换</button></div><div v-show = "isShowCode"><img src="https://img.xjishu.com/img/zl/2017/10/212257159687020.gif" alt=""></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {isShowCode:true}},methods:{toggle(){this.isShowCode = !this.isShowCode}}})app.mount("#app")</script>
</body></html>

三、Vue条件渲染-实例

1.权限管理系统

在一个权限管理系统中，不同的用户可能拥有不同的权限级别。根据用户的权限级别，页面上的功能按钮和菜单项应该显示或隐藏。例如，管理员用户可能能够看到所有的功能按钮，而普通用户只能看到部分功能按钮。这种情况下，你可以根据用户的权限级别来决定是否渲染特定的功能按钮和菜单项。

<template><div><button v-if="userRole === 'admin'">删除用户</button><button v-if="userRole === 'admin' || userRole === 'editor'">编辑文章</button><button v-if="userRole === 'admin' || userRole === 'editor' || userRole === 'viewer'">查看文章</button></div>
</template><script>
export default {data() {return {userRole: 'admin' // 可以从后端获取当前用户的权限级别};}
};
</script>

2.动态表单验证

在一个表单页面中，根据用户输入的内容动态地显示或隐藏错误提示信息。例如，当用户输入的邮箱格式不正确时，显示邮箱格式错误的提示信息；当用户输入的密码不符合要求时，显示密码格式错误的提示信息。

<template><form @submit.prevent="submitForm"><label>Email:</label><input type="email" v-model="email"><p v-if="!isValidEmail">邮箱格式错误</p><label>Password:</label><input type="password" v-model="password"><p v-if="!isValidPassword">密码长度应在6-12位之间</p><button type="submit">提交</button></form>
</template><script>
export default {data() {return {email: '',password: ''};},computed: {isValidEmail() {// 检查邮箱格式是否正确return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.email);},isValidPassword() {// 检查密码长度是否在6-12位之间return this.password.length >= 6 && this.password.length <= 12;}},methods: {submitForm() {// 提交表单逻辑}}
};
</script>

3.动态路由权限控制

在一个基于 Vue Router 的单页面应用中，根据用户的权限动态地控制路由访问权限。例如，某些页面只能被管理员用户访问，而普通用户不能访问。这时，你可以在路由配置中结合条件渲染来实现权限控制。

const routes = [{path: '/admin',component: AdminPage,meta: {requiresAdmin: true // 标记需要管理员权限访问的路由}},{path: '/profile',component: ProfilePage},{path: '/login',component: LoginPage}
];const router = new VueRouter({routes
});router.beforeEach((to, from, next) => {const isLoggedIn = checkUserLoggedIn(); // 检查用户是否已登录const isAdmin = checkUserAdmin(); // 检查用户是否是管理员if (to.meta.requiresAdmin && !isAdmin) {// 如果用户不是管理员且当前路由需要管理员权限，则跳转到登录页或其他页面next('/login');} else if (to.path === '/login' && isLoggedIn) {// 如果用户已登录且尝试访问登录页，则跳转到个人资料页或其他页面next('/profile');} else {// 其他情况下继续路由跳转next();}
});function checkUserLoggedIn() {// 检查用户是否已登录的逻辑
}function checkUserAdmin() {// 检查用户是否是管理员的逻辑
}

四、总结

Vue 条件渲染是指根据特定条件动态地显示或隐藏页面上的元素，从而实现灵活的页面交互效果。在 Vue 中，条件渲染通常通过以下几种方式实现：

v-if 指令： v-if 指令根据条件的真假来决定是否渲染 DOM 元素。当条件为真时，元素被渲染；当条件为假时，元素不被渲染。

<div v-if="isTrue">条件为真时显示的内容</div>

v-else 指令： v-else 指令与 v-if 搭配使用，用于表示在前一个 v-if 条件不满足时渲染的内容。

<div v-if="isTrue">条件为真时显示的内容</div>
<div v-else>条件为假时显示的内容</div>

v-else-if 指令： v-else-if 指令与 v-if 和 v-else 搭配使用，用于表示在前一个 v-if 条件不满足，但某个额外条件满足时渲染的内容。

<div v-if="type === 'A'">类型 A 的内容</div>
<div v-else-if="type === 'B'">类型 B 的内容</div>
<div v-else>其他类型的内容</div>

v-show 指令： v-show 指令根据条件的真假来动态地切换元素的显示与隐藏，与 v-if 不同的是，使用 v-show 时，元素始终会被渲染到 DOM 中，只是通过 CSS 控制其显示与隐藏。

<div v-show="isVisible">根据条件动态显示或隐藏的内容</div>

这些指令提供了在 Vue 应用中实现条件渲染的灵活方式，开发者可以根据具体的需求选择适合的指令来实现不同的交互效果。通过条件渲染，可以根据用户的操作或数据状态动态地调整页面的呈现，从而提升用户体验。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/bicheng/539.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构：查找与排序

数据结构：查找与排序

注&#xff1a;以下代码均为C 查找 一、线性表的查找 1. 顺序查找 int search_seq(vector<int> s, int key){for(int i 0; i < s.size(); i){if(s[i] key)return i;}return -1; }2. 折半查找 (1)非递归&#xff1a;循环 int search_bin1(vector<int> s,…
阅读更多...
C++初阶学习第一弹——C++入门（上）

C++初阶学习第一弹——C++入门（上）

前言&#xff1a; 很高兴&#xff0c;从今天开始&#xff0c;我们就要步入C的学习了&#xff0c;在这之前我们已经对C语言有了不错的了解&#xff0c;对数据结构也有了一些自己的认识&#xff0c;今天开始&#xff0c;我们就进入这个新的主题的学习——C 目录 一、C的发展即其特…
阅读更多...
一个快速克隆方法引出深浅拷贝说明

一个快速克隆方法引出深浅拷贝说明

提供的代码是一个泛型扩展方法&#xff0c;用于对任意类型的对象T进行浅拷贝&#xff08;shallow copy&#xff09;。这个方法使用反射来调用对象的MemberwiseClone方法&#xff0c;该方法为所有字段&#xff08;包括值类型和引用类型字段&#xff09;创建新的副本&#xff0c;…
阅读更多...
解析OceanBase v4.2函数索引进行查询优化

解析OceanBase v4.2函数索引进行查询优化

一、如何通过函数索引来进行查询优化 函数索引是一种优化查询的技术&#xff0c;其主要作用在于提升包含函数调用的查询语句的执行速度。当查询语句中包含函数调用时&#xff0c;数据库系统需要逐行执行函数计算&#xff0c;这无疑会增加查询的复杂性&#xff0c;导致查询速度…
阅读更多...
【C语言】多字节字符、宽字符（涉及字符集和编码）

【C语言】多字节字符、宽字符（涉及字符集和编码）

字符集、编码&#xff1a; 字符集&#xff1a;一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称&#xff0c;包括各国家文字、标点符号、图形符号、数字等。例如&#xff1a;ASCII、Unicode、GB2312、GBK、GB18030、BIG5(繁体中文) ... 编码方式&#xff1a;符号…
阅读更多...
【Flutter】自动生成图片资源索引插件一：FlutterAssetRefGenerator

【Flutter】自动生成图片资源索引插件一：FlutterAssetRefGenerator

介绍 FlutterAssetRefGenerator 插件&#xff1a;windows上 点击生成图片索引按钮后&#xff0c;pubspec.yaml 会出现中文乱码&#xff0c;需要手动改乱码&#xff1b;mac上没问题。 优点&#xff1a;点击图标自动生成。 目录 介绍一、安装二、使用 一、安装 安装FlutterAsset…
阅读更多...
移动端不居中问题/安卓和ios下line-height上下居中 css兼容问题

移动端不居中问题/安卓和ios下line-height上下居中 css兼容问题

移动端开发过程&#xff0c;经常会写带0.5px边框角标类的样式&#xff0c;直接使用border设置0.5px边框&#xff0c;ios有些机型会出现显示不完整的情况。所以改用伪元素方法实现边框。代码如下&#xff1a; .comment-entry::after{content: ;position: absolute;left: 0;top: …
阅读更多...
快速IO的方式|Java快读模板

快速IO的方式|Java快读模板

处理IO的方式&#xff1a; 处理输入和输出的方式&#xff1a; C&#xff1a;cin / cout Java&#xff1a;Scanner / System.out 但是这两种有超时的风险 那么C处理方式&#xff1a;直接改为scanf / printf &#xff0c;也就是C语言中的读写方式 Java处理方式&#xff1a;准备一…
阅读更多...
Python 中 + 和 += 赋值操作的性能比较

Python 中 + 和 += 赋值操作的性能比较

1. 问题背景 在 Python 中&#xff0c;我们可以通过 和 … 完成累加操作&#xff0c;在实际开发过程中我们一般会优先选择 &#xff0c;然而最近在对比 和 … 的性能时出现了 反而更慢的现象。因此&#xff0c;我们决定对此问题进行深入探讨。 2. 解决方案 为了准确地…
阅读更多...
C语言---贪吃蛇(一)---准备工作

C语言---贪吃蛇(一)---准备工作

文章目录 前言1.Win32 API介绍1.1.Win32 API1.2. 控制台程序1.3.控制台屏幕上的坐标[COORD](https://learn.microsoft.com/zh-cn/windows/console/coord-str)1.4.[GetStdHandle](https://learn.microsoft.com/zh-cn/windows/console/getstdhandle)1.5.[GetConsoleCursorInfo](h…
阅读更多...
视频太大怎么压缩变小？8种方法随时压缩视频大小

视频太大怎么压缩变小？8种方法随时压缩视频大小

视频太大怎么压缩变小&#xff1f;视频压缩方式分为两种&#xff0c;有损压缩和无损压缩&#xff0c;什么是有损什么是无损压缩&#xff0c;什么时候视频用无损压缩更好&#xff1f;什么时候用有损压缩更好&#xff1f;如何调整视频参数实现基本无损压缩&#xff1f; 今天就借助…
阅读更多...
九章云极DataCanvas AIDC OS智算操作系统正式发布，开启AI智算新纪元

九章云极DataCanvas AIDC OS智算操作系统正式发布，开启AI智算新纪元

4月18日&#xff0c;2024九章云极DataCanvas智算操作系统新品发布会于北京隆重召开&#xff0c;全新产品DATACANVAS AIDC OS智算操作系统&#xff08;以下简称AIDC OS&#xff09;正式官宣。AIDC OS以卓越的AI技术实力和AI基础软件为根基&#xff0c;以重新定义和突破传统为创新…
阅读更多...
我独自升级崛起在哪里下载 我独自升级崛起一键下载方法极速体验

我独自升级崛起在哪里下载 我独自升级崛起一键下载方法极速体验

我独自升级崛起在哪里下载 我独自升级崛起一键下载方法极速体验 最近在游戏圈内爆火的一款游戏《我独自升级&#xff1a;崛起》是一款由韩国漫画改编而成的热门多人网络在线联机游戏&#xff0c;这款游戏是一款的角色扮演游戏&#xff0c;游戏有着引人入胜的剧情模式。玩家们…
阅读更多...
Docker 入门指南：快速上手 Docker

Docker 入门指南：快速上手 Docker

Docker 是一种开源的容器化平台&#xff0c;它可以帮助开发者轻松地打包、发布和运行应用程序。本指南将介绍 Docker 的基本概念和常用操作&#xff0c;帮助你快速入门 Docker 技术。 1. 安装 Docker 首先&#xff0c;你需要在你的操作系统上安装 Docker。Docker 支持多种操作…
阅读更多...
m4a转wav怎么转？3个简单的转换方法~

m4a转wav怎么转？3个简单的转换方法~

随着音频的迅猛发展&#xff0c;不同的音频文件格式应运而生&#xff0c;其中M4A和WAV都备受欢迎。M4A格式的兴起始于对音质和压缩效率的双重追求&#xff0c;而WAV则因其高保真特性而成为专业录音室的首选。 M4A格式的由来 M4A格式最初是由苹果公司引入的&#xff0c;旨在提供…
阅读更多...
ZCC5080E USB 5V 输入 1A 双节锂电池充电管理 IC替代CS5080E

ZCC5080E USB 5V 输入 1A 双节锂电池充电管理 IC替代CS5080E

概要&#xff1a; ZCC5080E 是一款 5V USB 适配器输入&#xff0c;高精度双节锂离子电池充电管理芯片。具有0V充电功能&#xff0c;涓流充电、恒流充电、恒压充电和自动截止、自动再充等一套完整充电循环的充电管理芯片。芯片内部特设 9V 抗浪涌&#xff0c;芯片应用更安全可…
阅读更多...
6、JVM-JVM调优工具与实战

6、JVM-JVM调优工具与实战

前置启动程序 事先启动一个web应用程序&#xff0c;用jps查看其进程id&#xff0c;接着用各种jdk自带命令优化应用 Jmap 此命令可以用来查看内存信息&#xff0c;实例个数以及占用内存大小 jmap -histo 14660 #查看历史生成的实例 jmap -histo:live 14660 #查看当前存活的实…
阅读更多...
探索人工智能绘图的奇妙世界

探索人工智能绘图的奇妙世界

探索人工智能绘图的奇妙世界 人工智能绘图的基本原理机器之美&#xff1a;AI绘图作品AI绘图对艺术创作的影响未来展望与挑战图书推荐&#x1f449;AI绘画教程&#xff1a;Midjourney使用方法与技巧从入门到精通内容简介获取方式&#x1f449;搜索之道&#xff1a;信息素养与终身…
阅读更多...
CSS 实现视差滚动效果

CSS 实现视差滚动效果

一、是什么 视差滚动&#xff08;Parallax Scrolling&#xff09;是指多层背景以不同的速度移动&#xff0c;形成立体的运动效果&#xff0c;带来非常出色的视觉体验 我们可以把网页解刨成&#xff1a;背景层、内容层、悬浮层 当滚动鼠标滑轮的时候&#xff0c;各个图层以不…
阅读更多...
启明云端ESP32-S3+车载桥接器案例，能实现对车载产品集控

启明云端ESP32-S3+车载桥接器案例，能实现对车载产品集控

最近房车旅行很盛行&#xff0c;谁不想五一自驾游开车去外面玩&#xff1f;为了能提升用户体验&#xff0c;车企房车智能化升级越来越普遍&#xff0c;接下来小启给大家讲一个案例&#xff0c;启明云端ESP32-S3车载桥接器&#xff0c;感兴趣的可以看看。 一、ESP32-S3车载桥接器…
阅读更多...
最新文章

Copyright @ 2022~2023