当前位置: 首页 > news >正文

【Vue渲染】 条件渲染 | v-if | v-show | 列表渲染 | v-for

目录

前言

v-if和v-show的区别和联系

v-show和v-if如何选择

条件渲染|v-if|v-show

v-if

v-if v-else

v-if v-else-if v-else

template

v-show

列表渲染|v-for

v-for


前言

本文介绍Vue渲染,包含条件渲染v-if和v-show的区别和联系以及列表渲染v-for

v-if和v-show的区别和联系

面试高频题!!!

v-if和v-show都可以控制便签的显示与与隐藏

v-if是直接控制dom操作元素,true表示在dom上面渲染该元素,false表示不渲染

v-show是控制元素的css属性,display:none和display:block分别对应tfalse和true

v-show和v-if如何选择

v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要频繁切换,则使用 v-show 较好;如果在运行时绑定条件很少改变,则 v-if 会更合适

条件渲染|v-if|v-show

v-if

<标签 v-if="表达式"></标签>

表达式可以填,常量,js表达式,Vue实例管理的xx

<div class="app"><h1>{{msg}}</h1><input type="number" v-model="num"><div v-if="num>30">炎热</div></div><script>const vm = new Vue({el:'.app',data:{msg:"v-if条件渲染",num:''}})</script>

不渲染时

v-if v-else

<div class="app"><h1>{{msg}}</h1><input type="number" v-model="num"><div v-if="num>=20">炎热</div><div v-else>寒冷</div></div><script>const vm = new Vue({el:'.app',data:{msg:"v-if条件渲染",num:''}})</script>

v-if v-else-if v-else

<div class="app"><h1>{{msg}}</h1><input type="number" v-model="num"><div v-if="num<=10">寒冷</div><div v-else-if="num<=20">凉爽</div><div v-else>炎热</div></div><script>const vm = new Vue({el:'.app',data:{msg:"v-if条件渲染",num:''}})</script>

注意,在v-if v-else 、v-if v-else-if v-else中间不能添加其他标签否则就会报错

template

如果同一条件下需要控制多个标签的显示与隐藏并且减少代码的重复,那就要引入template标签,该标签是无意义的,只起到占位作用

<div class="app"><h1>{{msg}}</h1><input type="number" v-model="num"><template v-if="num>10"><div>1</div><div>2</div><div>3</div></template></div>

满足条件渲染时

v-show

<标签 v-show="表达式"></标签>

 <div class="app"><h1>{{msg}}</h1><input type="number" v-model="num"><div v-show="num>10">凉爽</div></div><script>const vm = new Vue({el:'.app',data:{msg:'v-show',num:''}})</script>

隐藏时

直接是操作标签的style display属性,用display:none来控制

列表渲染|v-for

v-for

语法格式

<标签 v-for="(每一项,索引) in 数组名">

直接使用插值语法就可以将数组中的每一项拿出来

<div class="app"><div v-for="(item,index) in arr">{{index}}--{{item}}</div></div><script>const vm = new Vue({el:'.app',data:{msg:"v-for列表渲染",arr:[1,2,3,4,5,6,7,8,9]}})</script>

数组中以对象形式

<div class="app"><div v-for="(item,index) in arr">{{item.name}}--{{item.age}}</div></div><script>const vm = new Vue({el:'.app',data:{msg:"v-for列表渲染",arr:[{name:'zhangsan',age:20},{name:'lisi',age:22},{name:'王五',age:25},]}})</script>

相关文章:

【Vue渲染】 条件渲染 | v-if | v-show | 列表渲染 | v-for

目录 前言 v-if和v-show的区别和联系 v-show和v-if如何选择 条件渲染|v-if|v-show v-if v-if v-else v-if v-else-if v-else template v-show 列表渲染|v-for v-for 前言 本文介绍Vue渲染&#xff0c;包含条件渲染v-if和v-show的区别和联系以及列表渲染v-for v-if和…...

开源网安解决方案荣获四川数实融合创新实践优秀案例

​11月16日&#xff0c;2023天府数字经济峰会在成都圆满举行。本次峰会由四川省发展和改革委员会、中共四川省委网络安全和信息化委员会办公室、四川省经济和信息化厅等部门联合指导&#xff0c;聚焦数字经济与实体经济深度融合、数字赋能经济社会转型发展等话题展开交流研讨。…...

debian/ubuntu/linux如何快速安装vscode

前言 这里写一篇简短的文字用来记录如何在Linux发行版上快速安装VScode&#xff0c;主要使用的一个软件snap&#xff0c;做一个简单介绍&#xff1a; Snap Store 是 Ubuntu、Debian、Fedora 和其他几个 Linux 发行版中的一个应用商店&#xff0c;提供了数千个应用程序和工具的…...

Python3语法总结-数据转换②

Python3语法总结-数据转换② Python3语法总结二.Python数据类型转换隐式类型转换显示类型转换 Python3语法总结 二.Python数据类型转换 有时候我们&#xff0c;需要对数据内置的类型进行转换&#xff0c;数据类型的转换。 Python 数据类型转换可以分为两种&#xff1a; 隐式类…...

【火炬之光-魔灵装备】

文章目录 装备天赋追忆石板技能魂烛刷图策略 装备 头部胸甲手套鞋子武器盾牌项链戒指腰带神格备注盾牌其余的装备要么是召唤物生命&#xff0c;要么是技能等级&#xff0c;鞋子的闪电技能等级加2不是核心&#xff0c;腰带的话主要是要冷却有冷却暗影的技能是不会断的&#xff…...

javascript选择器的封装,只需要写元素名或css类及id都可以选择到元素

//模仿jquery选择器样式&#xff0c;只需要写元素名或css类及id都可以选择到元素 <html><head><meta http-equiv"Content-Type:text/html;charsetutf8"/><link rel"shortcut icon" href"#"/><title>封装选择器&l…...

机器学习第7天:逻辑回归

文章目录 介绍 概率计算 逻辑回归的损失函数 单个实例的成本函数 整个训练集的成本函数 鸢尾花数据集上的逻辑回归 Softmax回归 Softmax回归数学公式 Softmax回归损失函数 调用代码 参数说明 结语 介绍 作用&#xff1a;使用回归算法进行分类任务 思想&#xff1a;…...

努力奋斗,遇上对的人

...

基于单片机音乐弹奏播放DS1302万年历显示及源程序

一、系统方案 1、本设计采用51单片机作为主控器。 2、DS1302计时显示年月日时分秒。 3、按键可以弹奏以及播放音乐&#xff0c;内置16首音乐。 二、硬件设计 原理图如下&#xff1a; 三、单片机软件设计 1、首先是系统初始化 /时钟显示**/ void init_1602_ds1302() { write…...

ceph学习笔记

ceph ceph osd lspoolsrbd ls -p testpool#查看 ceph 集群中有多少个 pool,并且每个 pool 容量及利 用情况 rados dfceph -sceph osd tree ceph dfceph versionsceph osd pool lsceph osd crush rule dumpceph auth print-key client.adminceph orch host lsceph crash lsceph…...

SQLSERVER 遍历循环的两种方式很详细有源码(2)

2.游标循环 Create table WS_Student ( [Id] int primary key not null, [My_Cocode] [int], [My_SCocode] [int], [userId] [bigint], [SetCName] [varchar](50) NULL, [SetEName] [varchar](50) NULL, [SetPcode] [varchar](50) NULL, [Se…...

flutter背景图片设置

本地图片设置 1、在配置文件pubspec.yaml中&#xff0c;设置以下代码 assets:- assets/- assets/test/2、如果目录中没有assets文件夹&#xff0c;则创建一个文件夹&#xff0c;并且取名为assets&#xff0c;在此文件夹中存放图片资源即可&#xff0c;如果想分文件夹管理&…...

【运维 监控】Grafana + Prometheus,监控Linux

安装和配置Grafana与Prometheus需要一些步骤&#xff0c;下面是一个简单的指南&#xff1a; 安装 Prometheus&#xff1a; 使用包管理器安装 Prometheus。在 Debian/Ubuntu 上&#xff0c;可以使用以下命令&#xff1a; sudo apt-get update sudo apt-get install prometheus在…...

Sentinel底层原理(下)

1、概述 Sentinel的核心原理&#xff0c;也就是前面提到暗流涌动的SphU.entry(…)这行代码背后的逻辑。 Sentinel会为每个资源创建一个处理链条&#xff0c;就是一个责任链&#xff0c;第一次访问这个资源的时候创建&#xff0c;之后就一直复用&#xff0c;所以这个处理链条每…...

竞赛选题 疫情数据分析与3D可视化 - python 大数据

文章目录 0 前言1 课题背景2 实现效果3 设计原理4 部分代码5 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 大数据全国疫情数据分析与3D可视化 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff0…...

macos 配置ndk环境

选择Android Studio下默认的ndk环境 mac电脑的ndk默认路径一般是 /Users/user_name/Library/Android/sdk/ndk/version_code 其中user_name为自己电脑的用户名&#xff0c;version_code为自己ndk安装的版本号&#xff0c;比如我这里电脑的ndk路径就是 /Users/zhangsan/Libra…...

【linux】进行间通信——共享内存+消息队列+信号量

共享内存消息队列信号量 1.共享内存1.1共享内存的原理1.2共享内存的概念1.3接口的认识1.4实操comm.hppservice.cc &#xff08;写&#xff09;clint.cc &#xff08;读&#xff09; 1.5共享内存的总结1.6共享内存的内核结构 2.消息队列2.1原理2.2接口 3.信号量3.1信号量是什么3…...

PlantUML基础使用教程

环境搭建 IDEA插件下载 打开IEDA系列IDE&#xff0c;从FIle–>Settings–>Plugins–>Marketplace 进入到插件下载界面&#xff0c;搜索PlantUML&#xff0c;安装PlantUML Integration和PlantUML Parser两个插件&#xff0c;并重启IDE 安装和配置Graphviz 进入官网…...

Redis:新的3种数据类型Bitmaps、HyperLoglog、Geographic

目录 Bitmaps简介常用命令bitmaps与set比较 HyperLoglog简介命令 Geographic简介命令 Bitmaps 简介 位操作字符串。 现代计算机使用二进制&#xff08;位&#xff09;作为信息的基本单位&#xff0c;1个字节等于8位&#xff0c;例如“abc”字符串是有3个字节组成&#xff0c…...

promise时效架构升级方案的实施及落地 | 京东物流技术团队

一、项目背景 为什么需要架构升级 promise时效包含两个子系统&#xff1a;内核时效计算系统&#xff08;系统核心是时效计算&#xff09;和组件化时效系统&#xff08;系统核心是复杂业务处理以及多种时效业务聚合&#xff0c;承接结算下单黄金流程流量&#xff09;&#xff…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Bean 作用域有哪些?如何答出技术深度?

导语&#xff1a; Spring 面试绕不开 Bean 的作用域问题&#xff0c;这是面试官考察候选人对 Spring 框架理解深度的常见方式。本文将围绕“Spring 中的 Bean 作用域”展开&#xff0c;结合典型面试题及实战场景&#xff0c;帮你厘清重点&#xff0c;打破模板式回答&#xff0c…...

苹果AI眼镜:从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中,苹果AI眼镜(Apple Glasses)正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch,而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠,而在于如何通过形态设计打破社交壁垒,成为用户“全天佩戴…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...

图解JavaScript原型:原型链及其分析 | JavaScript图解

​​ 忽略该图的细节&#xff08;如内存地址值没有用二进制&#xff09; 以下是对该图进一步的理解和总结 1. JS 对象概念的辨析 对象是什么&#xff1a;保存在堆中一块区域&#xff0c;同时在栈中有一块区域保存其在堆中的地址&#xff08;也就是我们通常说的该变量指向谁&…...

高端性能封装正在突破性能壁垒,其芯片集成技术助力人工智能革命。

2024 年&#xff0c;高端封装市场规模为 80 亿美元&#xff0c;预计到 2030 年将超过 280 亿美元&#xff0c;2024-2030 年复合年增长率为 23%。 细分到各个终端市场&#xff0c;最大的高端性能封装市场是“电信和基础设施”&#xff0c;2024 年该市场创造了超过 67% 的收入。…...