零基础入门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的控制流程
什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...
随机推荐
- 自主创新国产化科技：智能制造之 SMT 产线监控管理可视化
SMT(Surface Mounted Technology,表面贴片技术)指的是在印刷电路板 (Printed Circuit Board,PCB)基础上进行加工的系列工艺流程的简称,是电子组装行业 ...
- Vue之将前端的筛选结果导出为csv文件
有导入就有导出哈!这里继导入之后记录一下导出的实现过程. 1.按钮部分: <el-button class="filter-item" style="margin- ...
- 百度网盘(百度云)SVIP超级会员共享账号每日更新（2023.11.21）
百度网盘会员账号共享(11.21更新) 账号:tgc91660 密码:6858hykh 账号:ofj51327 密码:rvzp3251 账号:5799osrb 密码:862lwtr 账号:3730sw ...
- 【Mysql系列】（一）MySQL语句执行流程
首发博客地址 首发博客地址 系列文章地址 参考文章 MySQL 逻辑架构 连接器 连接命令一般是这么写的 mysql -h$ip -P$port -u$user -p 那么 什么是连接器? MySQL ...
- Nginx长连接学习之二
Nginx长连接学习之二 背景 距离最开始学习Nginx的长连接已经一年半; 距离最开始学习Linux的TCP内核参数也已经过去了一年. 最近产品再次出现了TCP链接相关的问题. 因为一开始不知道部署 ...
- [转帖]038-拯救大兵瑞恩之 TiDB 如何在 TiKV 损坏的情况下恢复
https://tidb.net/blog/4b5451bb?utm_source=tidb-community&utm_medium=referral&utm_campaign=re ...
- [转帖]JMeter InfluxDB v2.0 listener plugin
https://github.com/mderevyankoaqa/jmeter-influxdb2-listener-plugin Support my Ukrainian Family ️ Lik ...
- [转帖]一次python服务的性能优化经历
https://juejin.cn/post/7208708762265616421 问题背景: 在我们的业务中,有一些推荐的场景会需要走到集团研究院的算法推荐服务,对一些用户进行个性化的课件推荐 ...
- [转帖]shell 实现行转列、列转行的几种方法
目录 shell 实现行转列.列转行的几种方法 awk 行转列 xargs 行转列 tr 列转行 参考资料 shell 实现行转列.列转行的几种方法 awk 行转列 以空格为分隔符 awk -F &q ...
- python批量上传文件到七牛云
导航 引子 棘手的需求 化繁为简 实战案例 结语 参考 本文首发于智客工坊-<python批量上传文件到七牛云>,感谢您的阅读,预计阅读时长3min. 古之立大事者,不惟有超世之才,亦必有 ...