零基础入门Vue之To be or not to be——条件渲染
温故
在前面的内容能了解到，Vue不仅仅能进行数据渲染还可以对样式进行绑定
并且他能随意的切换样式，但Vue的初衷就是尽量少让使用者操作dom节点
加入你要让指定dom显示或者不显示，该怎么办呢？以目前的东西来说，不拿到dom节点还是做不到的
因此，Vue提供了另外的办法去解决它：条件渲染
条件渲染之v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
从官网上看，这个v-if指令理解起来也不难，就是说，想要显示就
<div v-if="true"></div>
不想显示就
<div v-if="false"></div>
v-if的基本用法
可以根据前面提到的原理，用一个变量去控制，毕竟双引号里面可以写js表达式
基于这个原理，实现一个点击按钮显示文字，再点击文字消失，再点击显示以此类推的效果
v-else与v-else-if
众所周知，在变成语言里面分支是依赖于if-else或者是if-else-if来控制的（switch、三目暂且不论）
Vue也提供了这一种方式，允许根据一定条件下来控制多个dom节点的显示或不显示
PS：如果要使用这种办法，dom节点必须连在一起不能拓展 且 当条件为false的时候这个dom会被删除，但为true的时候会添加进去
请看如下例子：利用Vue的条件渲染，实现判断密码是否输入错误、输入为空、输入正确，并且给出提示
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<input type="password" v-model="pwd" placeholder="enter you pwd."><br/>
<span v-if="pwd==''">密码不能为空</span>
<span v-else-if="pwd!=='123456'">密码错误</span>
<span v-else >密码正确</span>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
pwd:""
},
})
</script>
</html>
条件渲染之v-show
v-show与v-if不同，v-show是直接让节点不显示，但并不是删除
并且v-show没有其他的else，他就只有一个true显示false不显示
看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<span v-show="show">Hello world</span><br/>
<button @click="show=!show">点我显示文字</button>
</div>
</body>
<script>
let vm = new Vue({
el:"#root",
data:{
show:false
},
})
</script>
</html>
我比较懒，直接搬了v-if的基本使用的代码，v-show的用法只有这一点，其他的也无非是在""里面写变量去控制显示不显示
打开浏览器的开发者调试工具可以看到当show为false时这个节点存在但他被隐藏了，但v-if是直接删除
ps：v-show比较适用于变动比较频繁的场合，变动不需要渲染很多东西
The End
结束啦~
零基础入门Vue之To be or not to be——条件渲染的更多相关文章
- 零基础入门 实战mpvue2.0多端小程序框架
第1章 课程快速预览(必看!!!)在这一章节中,老师讲带领你快速预览课程整体.其中,涉及到为什么要做这么一门实战课程.制作一个小程序的完整流程是怎么样的,以及如何做项目的技术选型. 第2章 30 分钟 ...
- 零基础入门 Java 后端开发，有哪些值得看的视频?
目前网络上充满了大量的 Java 视频教程,然而内容却鱼龙混杂,为了防止小伙伴们踩坑,一枫结合自己的学习经验,向大家推荐一些不错的学习资源. 作为一名非科班转码选手,可以说,我是在哔哩哔哩上的研究生! ...
- 从零基础入门JavaScript（1）
从零基础入门JavaScript(1) 1.1 Javascript的简史 1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了j ...
- 函数:我的地盘听我的 - 零基础入门学习Python019
函数:我的地盘听我的 让编程改变世界 Change the world by program 函数与过程 在小甲鱼另一个实践性超强的编程视频教学<零基础入门学习Delphi>中,我们谈到了 ...
- Cloudera Manager、CDH零基础入门、线路指导 http://www.aboutyun.com/thread-9219-1-1.html (出处: about云开发)
Cloudera Manager.CDH零基础入门.线路指导http://www.aboutyun.com/thread-9219-1-1.html(出处: about云开发) 问题导读:1.什么是c ...
- 【JAVA零基础入门系列】Day2 Java集成开发环境IDEA
开发环境搭建好之后,还需要一个集成开发环境也就是IDE来进行编程.这里推荐的IDE是IDEA,那个老掉牙的Eclipse还是先放一边吧,(手动滑稽). IDEA的下载地址:http://www.jet ...
- 【JAVA零基础入门系列】Day4 变量与常量
这一篇主要讲解Java中的变量,什么是变量,变量的作用以及如何声明,使用变量. 那么什么是变量?对于初学者而言,可以将变量理解为盒子,这些盒子可以用来存放数据,不同类型的数据需要放在对应类型的盒子里. ...
- 【JAVA零基础入门系列】Day5 Java中的运算符
运算符,顾名思义就是用于运算的符号,比如最简单的+-*/,这些运算符可以用来进行数学运算,举个最简单的栗子: 已知长方形的长为3cm,高为4cm,求长方形的面积. 好,我们先新建一个项目,命名为Rec ...
- 【JAVA零基础入门系列】Day6 Java字符串
字符串,是我们最常用的类型,每个用双引号来表示的串都是一个字符串.Java中的字符串是一个预定义的类,跟C++ 一样叫String,而不是Char数组.至于什么叫做类,暂时不做过多介绍,在之后的篇章中 ...
- 【JAVA零基础入门系列】Day8 Java的控制流程
什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...
随机推荐
- 1 Englishi 词根
1 ab 离去,相反, 不 (负能量的) abnormal abuse 2 anti 反对,相反 antiwar antiaging antiforeign antinoise 3 co-/col ...
- 写了个移动端可滑动（惯性滑动&回弹）Vue导航栏组件 ly-tab
https://www.imooc.com/article/23768?block_id=tuijian_wz https://blog.csdn.net/weixin_44614772/articl ...
- hdu 5234
题意:求在不超过k的情况下,最多可以得到多少价值. 三维dp,结合01背包,第三维就是用来保存在不同的背包容量下能得到的最大价值,也就是第三维有很多状态. #include<iostream&g ...
- linux 查看服务器cpu 与内存配置
转载请注明出处: 1. 通过 lscpu 命令查看 服务器的cpu 配置 显示格式: Architecture: #架构 CPU(s): #逻辑cpu颗数 Thread(s) per core: #每 ...
- AvaloniaUI 取消标题栏，无边框无最大最小化，
AvaloniaUI 取消标题栏,无边框无最大最小化, 创建一个Window控件 并且在Window中添加以下代码 ExtendClientAreaToDecorationsHint="Tr ...
- 问题--VSCODE编写C含scanf无终端跳出
1.问题 在VSCODE中编写C程序,用到scanf输入时,发现无终端输入数据 2.解决方法 在设置里搜索RunInTerminal,勾选该选项即可
- SpringMVC01——回顾MVC
1.1什么是MVC MVC是模型(Model).视图(View).控制器(Controller)的简写,是一种软件设计规范. 是将业务逻辑.数据.显示分离的方法来组织代码. MVC主要作用是降低了视图 ...
- [转帖]OutOfMemory JVM参数一览
https://www.cnblogs.com/kuroro/p/11707951.html JVM提供了有用的参数来处理OutOfMemoryError.在本文中,我们要强调那些JVM参数.在对Ou ...
- [转帖]分析redis 大key
http://www.lishuai.fun/2023/05/05/redis-bigkey/#/%E5%AE%89%E8%A3%85 redis-rdb-tools 是一个 python 的解析 r ...
- [转帖]《Linux性能优化实战》笔记（十七）—— Linux网络基础与性能指标
一. 网络模型 1. OSI 网络模型(七层) 为了解决网络互联中异构设备的兼容性问题,并解耦复杂的网络包处理流程,OSI 模型把网络互联的框架分为七层,每个层负责不同的功能.其中, 应用层,负责为应 ...