当前位置: 首页 > 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…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

linux arm系统烧录

1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 &#xff08;忘了有没有这步了 估计有&#xff09; 刷机程序 和 镜像 就不提供了。要刷的时…...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

服务器--宝塔命令

一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行&#xff01; sudo su - 1. CentOS 系统&#xff1a; yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...

API网关Kong的鉴权与限流:高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

Mysql故障排插与环境优化

前置知识点 最上层是一些客户端和连接服务&#xff0c;包含本 sock 通信和大多数jiyukehuduan/服务端工具实现的TCP/IP通信。主要完成一些简介处理、授权认证、及相关的安全方案等。在该层上引入了线程池的概念&#xff0c;为通过安全认证接入的客户端提供线程。同样在该层上可…...

MySQL体系架构解析(三):MySQL目录与启动配置全解析

MySQL中的目录和文件 bin目录 在 MySQL 的安装目录下有一个特别重要的 bin 目录&#xff0c;这个目录下存放着许多可执行文件。与其他系统的可执行文件类似&#xff0c;这些可执行文件都是与服务器和客户端程序相关的。 启动MySQL服务器程序 在 UNIX 系统中&#xff0c;用…...

React父子组件通信:Props怎么用?如何从父组件向子组件传递数据?

系列回顾&#xff1a; 在上一篇《React核心概念&#xff1a;State是什么&#xff1f;》中&#xff0c;我们学习了如何使用useState让一个组件拥有自己的内部数据&#xff08;State&#xff09;&#xff0c;并通过一个计数器案例&#xff0c;实现了组件的自我更新。这很棒&#…...