【vue.js】文档解读【day 3】 | 条件渲染

在这里插入图片描述

如果阅读有疑问的话,欢迎评论或私信!!

文章目录

  • 条件渲染
    • 前言:
    • v-if
    • v-else
    • v-else-if
    • template中的v-if
    • v-show
    • v-if vs v-show

条件渲染

前言:

在JavaScript中,我们知道条件控制语句可以控制程序的走向,确保可以输出指定的结果。而在vue中,我们同样可以对标签使用条件控制指令控制页面的渲染走向

v-if

v-if指令可以根据数据的真假值来确定是否渲染在页面中。例如:

<h1 v-if = "isActive">当前处于活跃状态
</h1>

v-else

同时,我们也可以使用else在数据为假值是渲染出不同的效果。例如:

<h1 v-if = "isActive" @click = "isActive = true">标签1
</h1>
<h1 v-else @click = "isActive = false">标签2
</h1>

这样就可以实现一个简单的导航栏啦!快去试试吧!

这里需要注意else的出现必定需要伴随着v-if或者v-else-if

v-else-if

v-else-if同样和JavaScript中的条件控制语句一样,都是用来控制DOM的渲染。例如:

<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>

这里的v-else-ifv-else类似,都是需要跟在一个v-if或者一个v-else-if之后。

template中的v-if

在我们需要同时控制多个DOM渲染时,我们可以通过在template上添加v-if实现。例如:

<template v-if="ok"><h1>标题</h1><p>段落1</p><p>段落1</p>
</template>

当ok为true时,template中的元素才会被渲染。需要注意的是,template这个标签是一个不可见的包装器元素,它并不会被渲染。同样的,v-elsev-else-if也可以在template上使用。

v-show

除了使用v-if,我们还可以使用v-show来操作DOM的显示效果。例如:

<h1 v-show="ok">你好!</h1>

与v-if不同的是,v-show的原理是通过修改display来隐藏/显示DOM元素。那么,v-show与v-if渲染的方法是不同的。

v-if vs v-show

v-if控制的DOM是真的根据真假值来渲染,而v-show控制的DOM会总是渲染,只是会更改标签的display属性来隐藏/显示。

v-if的惰性:当v-if中的值第一次为false时,那么在首次渲染时,并不会做任何事,可以说是“沉睡”。只要v-if的值为true之后,它才会再次被“唤醒”渲染。

总的来说,v-if有更高的切换开销:当我们切换真假值是会重新渲染该元素,所以有一定的时间开销。v-show有更高的初始渲染开销:在首次渲染时,v-show总是被渲染。所以具体要怎么使用这两个指令,需要根据项目的具体需求来使用。

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

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

相关文章

Failed to fetch dynamically imported module错误解决方案

工作需要&#xff0c;需要搬移某个功能代码到去年的分支&#xff0c;结果报了这个错 花了2个多小时排查&#xff0c;最后发现&#xff0c;是某个ts文件没有搬过来 吐血&#xff0c;怎么不直接提示这个文件不存在呢&#xff0c;让我研究了半天

【JAVA】HashMap扩容性能影响及优化策略

&#x1f34e;个人博客&#xff1a;个人主页 &#x1f3c6;个人专栏&#xff1a;JAVA ⛳️ 功不唐捐&#xff0c;玉汝于成 目录 前言 正文 结语 我的其他博客 前言 在软件开发中&#xff0c;HashMap是一种常用的数据结构&#xff0c;但在处理大量数据时&#xff0c;其扩容…

基于支持向量机的的二分类预测

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 完整代码和数据下载链接:基于支持向量机的的二分类预测(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88947565 SVM应用实例, 基于…

SpringBoot配置达梦数据库依赖(达梦8)

maven配置 <!-- 达梦数据库 --><dependency><groupId>com.dameng</groupId><artifactId>DmJdbcDriver18</artifactId><version>8.1.1.193</version></dependency><dependency><groupId>com.alibaba&l…

【力扣 - 最大子数组和】

题目描述 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&…

蓝桥杯C++大学B组一个月冲刺记录2024/3/12

蓝桥杯C大学B组一个月冲刺记录2024/3/12 规则&#xff1a;每日三题 时间过得好快… 1.挤牛奶 每天早上 5点&#xff0c;三名农夫去牛场给奶牛们挤奶。 现在从 5点开始按秒计时&#xff0c;第一名农夫在第 300秒开始给牛挤奶&#xff0c;并在第 100 秒停止挤奶。 第二名农夫在第…

自动化测试过程中的手机验证码处理!

手机验证码登录很普遍了&#xff0c;那么在自动化测试的时候需要登录&#xff0c;登录不了就意味着很多自动化就没法执行下去了。 到底该怎么处理呢&#xff1f;其实并不难&#xff0c;我们先看下验证码的业务逻辑&#xff0c;在我们“点击获取验证码”按钮的时候&#xff0c;…

一学就懂:安装OLED透明屏拼接屏需要注意什么?

安装OLED透明屏拼接屏时&#xff0c;需要注意以下几个方面&#xff1a; 一、前期准备 测量和规划&#xff1a;对安装区域进行详细测量&#xff0c;确保安装区域的尺寸和结构符合OLED透明屏的要求。同时&#xff0c;规划好拼接屏的数量、位置以及布线和固定方案。 环境评估&am…

Weblogic 常规渗透测试环境

测试环境 本环境模拟了一个真实的weblogic环境&#xff0c;其后台存在一个弱口令&#xff0c;并且前台存在任意文件读取漏洞。分别通过这两种漏洞&#xff0c;模拟对weblogic场景的渗透。 Weblogic版本&#xff1a;10.3.6(11g) Java版本&#xff1a;1.6 弱口令 环境启动后…

(golang)切片何时会创建新切片或影响原切片

什么时候切片操作会影响原切片 // 1.切片后没有触发slice的扩容机制时 什么时候对切片操作会创建新切片不影响原切片 // 2.对切片头元素进行截取的时候 // 3.当使用append时&#xff0c;len > cap则会触发扩容机制 前置&#xff1a; //slice结构体 type SliceHeader struct…

指针篇章-(4)+qsort函数的模拟

学习目录 ———————————————————————————————————————————————————————————————————————————————————————————————————————————————————————————…

​知识图谱:基于嵌入的模型(TransE 、TransH、TransR和TransD)

(一)TransE: Translating Embeddings for Modeling Multi-relational Data. Antoine Bordes, Nicolas Usunier, Alberto Garcia-Duran, Jason Weston, Oksana Yakhnenko. NIPS 2013. 论文地址:http://papers.nips.cc/paper/5071-translating-embeddings-for-modeling-multi-…

动态规划在算法中的实践

【摘要】为了提高算法的效率&#xff0c;动态规划是在算法实践中经常使用的一个思想&#xff0c;有些问题会非常适合使用动态规划的思想来设计算法。本文将借助LeetCode上的一些例子&#xff0c;来讲解和说明动态规划在算法案例中的一些实践。 【关键词】 动态规划 LeetCode 算…

【Vue3】defineExpose 实践

【Vue3】defineExpose 实践 defineExpose 是 Vue 3 的 <script setup> 语法糖中提供的一个函数&#xff0c;用于显式地暴露组件的属性、方法或其他响应式状态给其父组件或外部使用。这是在使用 <script setup> 语法时&#xff0c;控制组件公开哪些内部状态和方法的…

[论文笔记]跨语言摘要最新综述:典型挑战及解决方案

https://arxiv.org/abs/2203.12515 跨语言摘要是指为给定的一种语言(例如中文)的文档生成另一种语言(例如英文)的摘要。 图1:四个端到端框架的概述。XLS:跨语言摘要;MT:机器翻译;MS:单语摘要。虚线箭头表示监督信号。无框彩色方块表示相应任务的输入或输出…

【华为OD机试】智能成绩表【C卷|100分】

【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 小明来到某学校当老师,需要将学生按考试总分或单科分数进行排名,你能帮帮他吗? 输入描述 第 1 行输入两个整数,学生人数 n 和科目数量 m,0<n<100,0<m < 10 第 2 行输入 …

Rust 语言中的 into() 方法

在 Rust 中&#xff0c;into() 方法通常用于将一个类型的值转换为另一个类型&#xff0c;这通常涉及到资源的所有权转移。into() 方法通常定义在实现了 Into<T> trait 的类型上&#xff0c;该 trait 允许一个类型被“转换”为另一个类型。 into() 方法的一个常见用途是在…

如果reactive绑定的数据没有双向绑定

只能用于对象类型 (array map set weakmap weakset Object这样的集合类型)。 不能持有如 string、number 或 boolean 这样的原始类型。 不能替换整个对象 对解构操作不友好&#xff1a;当我们将响应式对象的原始类型属性解构为本地变量时&#xff0c;或者将该属性传递给函数时…

Deep Learning for Detecting Robotic Grasps

链接&#xff1a;1301.3592.pdf (arxiv.org) 这个用于从单一RGB-D视图进行机器人抓取检测的算法包括以下步骤&#xff1a; 图像获取&#xff1a; 机器人获取包含待抓取对象的场景的RGB-D图像。 抓取评分&#xff1a; 使用小型深度网络对RGB-D图像中的潜在抓取进行评分。抓取以在…

如何才能做一名渗透测试人员?

学习实践&#xff0c;目前只有这路子&#xff0c;自学9月&#xff0c;成功入圈。下面说一下自己的学习路径&#xff0c;都是摸爬滚打&#xff0c;交了N份钱才学会的。 切记一定要先了解整个渗透测试的流程&#xff0c;记住整个流程口诀&#xff1a;信息收集&打点&#xff…