HBuilder X 中Vue.js基础使用2(三)

一、条件渲染

1、条件判断

v-if : 表达式返回真值时才被渲染

v-else :表达式返回为假时不被渲染

2、 分支条件判断

v-else-if :使用v-if , v-else-if 和 v-else 来表示其他的条件分支

 

 

3、显示隐藏

v-show

        v-show == true 把节点显示
        v-show == false 把节点隐藏(display:none)

按条件显示元素 v-show 用法和v-if 基本相同

 

v-if和v-show 区别

相同之处:

  • 都可以用于根据条件动态显示或隐藏页面元素。
  • 都是Vue框架提供的指令,用于简化条件渲染的操作。
  • 都可以通过条件表达式来确定元素是否显示,提供了灵活性和控制性。

不同之处:

  • 触发时机:v-if是惰性的,只有在条件为真时才会渲染对应的元素;而v-show在初始化时即渲染了所有元素,只是在条件为假时将元素的display属性设为none。
  • 性能开销:由于v-if是惰性的,条件为假时对应的元素不会被渲染,因此在条件变化频繁时,v-if具有更好的性能表现;而v-show虽然会一直渲染元素,但只是通过修改display属性来切换元素的显示与隐藏,不会造成重新渲染。
  • 编译过程:v-if在条件为假时,对应的元素不存在于DOM结构中,需要重新编译和渲染;而v-show在条件为假时,元素始终存在于DOM结构中,只是通过样式控制其显示与隐藏,不会触发重新编译。
  • 用法场景:一般来说,对于需要频繁切换显示状态的元素,使用v-show会比较适合;而对于需要根据条件动态添加或移除元素的场景,使用v-if更为合适。

4、循环

  v-for的基本格式是 "item in 数组",语法 :每一项 in 数组

  • 数组通常是来自data或者prop,也可以是其他方式;
  • item是我们给每项元素起的一个别名,这个别名可以自定来定义;
  • 如果需要索引,可以使用格式: "(item, index) in 数组";

   v-for也支持遍历对象,语法:(值 键名 下标 ) in 对象

   并且支持有如下参数:

  1.  一个参数: "value in object";
  2.  二个参数: "(value, key) in object";
  3.  三个参数: "(value, key, index) in object";

<script setup>
import {ref} from 'vue'const flag=ref(true)const score=ref(60)const isShow=ref(true)const majors = ['java', 'mysql', 'oracle', 'python', 'linux']import { reactive } from 'vue';
//定义对象
const datas=reactive({name:'张三',age:18,gender:'男',tel:'120'
})</script><template><div><button @click="flag=!flag">单击我</button><h2 v-if="flag">我</h2><h2 v-else>其他</h2><hr/><p><input type="text" v-model="score"/><div v-if="score>=90 && score<=100">优秀</div><div v-else-if="score>=80 && score<90">良好</div><div v-else-if="score>=70 && score<80">中等</div><div v-else-if="score>=60 && score<70">一般</div><div v-else>不及格</div></p><h3 v-show="isShow">我会隐身</h3><button @click="isShow=!isShow">显示/隐藏</button><p><ul><!-- 	遍历数组 --><li v-for="item in majors" >{{item}}</li></ul><ul><!-- 	遍历数字 --><li v-for="(num,index) in 5" >{{index}}-{{num}}</li></ul><ul><!-- 	遍历对象 --><li v-for="(value,key,index) in datas" >{{index}}->{{key}}->{{value}}</li></ul></p></div>
</template><style>li{text-align: left;padding: 15px 5px;font-size: larger;}</style>

 

v-if 和 v-for注意要点:

1、当二者同时存在时,v-if会先执行

2、当v-if和v-for同时存在于同一个元素上时,Vue会根据官方文档的建议发出警告。原因是v-for的优先级比v-if更高,这意味着v-for会先被解析,然后再解析v-if。这可能会导致不必要的性能开销,因为v-if会在每次迭代时都被执行,而不是在条件为真时执行。

3、在这种情况下,建议的最佳做法是将v-if移动到包裹元素上,而不是直接放在带有v-for的元素上。这样可以确保v-if只会在条件为真时才会被执行,而不会在每次迭代时都被执行,从而提高性能并避免潜在的错误。

最好避免在同一个元素上同时使用v-if和v-for,以确保代码的可读性和性能

 使用template来对多个元素进行包裹,而不是使用div来完成;

 

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

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

相关文章

PortQry下载安装使用教程(超详细),Windows测试UDP端口

《网络安全自学教程》 PortQry是微软官方提供的一款TCP/IP连接「排障工具」&#xff0c;用来「检查」TCP/UDP「端口状态」。 平时检查端口状态&#xff0c;最常用的是telnet&#xff0c;但它是基于TCP协议的&#xff0c;无法检测「UDP端口」&#xff0c;这篇文章教大家如何在W…

Axure随机验证码高级交互

亲爱的小伙伴&#xff0c;在您浏览之前&#xff0c;烦请关注一下&#xff0c;在此深表感谢&#xff01; 课程主题&#xff1a;字母数字随机验证码高级交互 主要内容&#xff1a;4位字母数字随机验证码生成、错误提示与State状态同步 应用场景&#xff1a;登录验证码、其他类…

面试宝典(五):用三个线程按顺序循环打印123三个数字,比如123123123

要使用三个线程按顺序循环打印123三个数字&#xff0c;势必要控制线程的执行顺序&#xff0c;可以使用java.util.concurrent包中的Semaphore类来控制线程的执行顺序。 代码示例 import java.util.concurrent.Semaphore;public class SequentialPrinting123 {private static Se…

leetcode:34. 在排序数组中查找元素的第一个和最后一个位置(python3解法)

#1024程序员节 | 征文# 难度&#xff1a;中等 给你一个按照非递减顺序排列的整数数组 nums&#xff0c;和一个目标值 target。请你找出给定目标值在数组中的开始位置和结束位置。 如果数组中不存在目标值 target&#xff0c;返回 [-1, -1]。 你必须设计并实现时间复杂度为 O(lo…

初识算法 · 前缀和(1)

目录 前言&#xff1a; 一维数组的前缀和 题目解析 算法原理 算法编写 二维数组的前缀和 题目解析 算法原理 算法编写 前言&#xff1a; ​本文的主题是前缀和&#xff0c;通过两道题目讲解&#xff0c;一道是一维数组的模板&#xff0c;一道是二维数组的模板。 链接…

【WebGIS实例】(18)MapboxGL 绘制矢量——线、面

前言 Mapbox GL JS 版本&#xff1a;3.6.0 该博客仅供学习参考&#xff0c;如果您是计划在实际项目中实现该功能&#xff0c;也推荐您直接使用已有的功能库&#xff1a; 官方案例&#xff1a;Draw a polygon and calculate its areamapbox-gl-draw&#xff1a;mapbox/mapbox-g…

基于Django+python的酒店客房入侵检测系统设计与实现

项目运行 需要先安装Python的相关依赖&#xff1a;pymysql&#xff0c;Django3.2.8&#xff0c;pillow 使用pip install 安装 第一步&#xff1a;创建数据库 第二步&#xff1a;执行SQL语句&#xff0c;.sql文件&#xff0c;运行该文件中的SQL语句 第三步&#xff1a;修改源…

HTTPS讲解

前瞻 HTTP与HTTPS的关系 HTTPS也是一个在应用层的协议&#xff0c;是在HTTP协议基础上的一个加密解密层 明文 密文 秘钥 明文->秘钥 加密 秘钥->明文 解密 例如:明文为7 秘钥为2 7^21015&#xff1b; 5就是密文例子: 因为http的内容是明文传输的&#xff0c;明文…

危险物品图像分割系统:一键训练

危险物品图像分割系统源码&#xff06;数据集分享 [yolov8-seg-GFPN&#xff06;yolov8-seg-CSwinTransformer等50全套改进创新点发刊_一键训练教程_Web前端展示] 1.研究背景与意义 项目参考ILSVRC ImageNet Large Scale Visual Recognition Challenge 项目来源AAAI Global…

LabVIEW共享变量通信故障

问题概述&#xff1a; 在LabVIEW项目中&#xff0c;使用IO服务器创建共享变量&#xff0c;并通过LabVIEW作为从站进行数据通信。通讯在最初运行时正常&#xff0c;但在经过一段时间或几个小时后&#xff0c;VI前面板出现错误输出&#xff0c;导致数据传输失败。虽然“分布式系统…

折扣影票接口对接渠道如何选择?

选择折扣影票接口对接渠道需要综合多方面因素考虑&#xff0c;以下是一些建议&#xff1a; 1.合法性和合规性&#xff1a; 确认供应商资质&#xff1a;优先选择具有相关票务经营资质的渠道。比如一些大型的在线票务平台&#xff0c;它们通常经过官方认证和监管&#xff0c;在…

[JAVAEE] 多线程的案例(二) - 阻塞队列 生产者消费者模型

目录 一. 什么是阻塞队列 二. java中的阻塞队列 三. 生产者消费者模型 3.1 生产者消费者模型与阻塞队列密不可分的关系 3.2 阻塞队列在生产者消费者模型的作用 a. 解耦合 b. 削峰填谷 四. 模拟实现阻塞队列 4.1 实现put方法 4.2 实现take方法 4.3 生产者消费者模型​…

了解C# 程序结构

本节我们将学习 C# 编程语言的结构&#xff0c;为了让大家能够对 C# 程序结构有个更好的理解&#xff0c;我们会先演示一个最小的、最简单的 C# 程序结构&#xff0c;以便作为接下来的章节的参考。 C# Hello World 实例 一个 C# 程序主要包括以下部分&#xff1a; 命名空间声明…

08 实战:色彩空间展示(本程序以视频为主)

程序效果如下: 我在这里讲解RGB和YCbCr的原理: 一、RGB颜色空间 1.1 基本概念 RGB颜色空间是一种最基础和常用的颜色表示方式,它基于人眼感知色彩的三原色原理。RGB分别代表: R(Red):红色G(Green):绿色B(Blue):蓝色通过这三种基本颜色的不同组合,可以产生人眼…

Promise、async、await 、异步生成器的错误处理方案

1、Promise.all 的错误处理 Promise.all 方法接受一个 Promise 数组&#xff0c;并返回所有解析 Promise 的结果数组&#xff1a; const promise1 Promise.resolve("one"); const promise2 Promise.resolve("two");Promise.all([promise1, promise2]).…

基于人体姿势博文文章

MATLAB运动目标检测系统应用背景 运动目标的定位跟踪&#xff0c;检测识别&#xff0c;运动分析在图像压缩、运动分析、交通检测&#xff0c;智能监控等方面有主要的应用。 首先&#xff0c;在图像压缩中&#xff0c;运动目标检测技术可以在背景区域中将前景区域提取分割出来…

91.【C语言】数据结构之单向链表的查找,中间插入和删除,销毁

目录 1.链表的查找函数 2.链表的修改函数 3.链表的中间插入函数 1.在pos之前插入:SLTInsertBefore函数 1.借助头指针pphead 示意图 代码示例(写入SList.c) 头文件添加SLTInsertbefore的声明 main.c的部分代码改为 1.测试中间插入 2.测试头部插入 3.测试pos为NULL的…

机器视觉:9点标定的原理与实现

一、什么是标定 标定就是将机器视觉处理得到的像素坐标转换成实际项目中使用到的毫米坐标。简单说即使看看实际单位距离内有几个像素&#xff0c;如下图所示&#xff0c;10mm的距离内有222个像素&#xff0c;那像素坐标和实际的毫米坐标就有个比例关系了。 二、九点标定 9点标…

API网关的作用--为什么微服务需要一个API网关?

微服务网关核心作用就是协议转换、安全隔离和流量控制 微服务架构中&#xff0c;API网关作为系统的入口点&#xff0c;可以统一处理所有客户端请求。 1&#xff09;协议转换&#xff1a;它能够支持多种通信协议&#xff08;如HTTP、gRPC等&#xff09;之间的相互转换&#xff…

如何初始化一个线上的GitHub仓库,在本地已有的仓库中上传到线上

如何初始化一个线上的GitHub仓库&#xff0c;在本地已有的仓库中上传到线上&#xff0c; 首先&#xff0c;先创建一个线上的仓库 本地有一个曾经的仓库&#xff0c;或者本地git init创建一个本地仓库 根据线上仓库的主页给的提示代码进行上传 代码如下&#xff1a; …or cr…