零基础入门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的控制流程
什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...
随机推荐
- Android NativeCrash 捕获与解析
Android 开发中,NE一直是不可忽略却又异常难解的一个问题,原因是这里面涉及到了跨端开发和分析,需要同时熟悉 Java,C&C++,并且需要熟悉 NDK开发,并且解决起来不像 Java异 ...
- 基于Kubernetes的Serverless PaaS稳定性建设万字总结
作者:许成铭(竞霄) 数字经济的今天,云计算俨然已经作为基础设施融入到人们的日常生活中,稳定性作为云产品的基本要求,研发人员的技术底线,其不仅仅是文档里承诺的几个九的 SLA 数字,更是与客户切身利益 ...
- C#排序算法4：希尔排序
希尔排序是插入排序的一种又称"缩小增量排序"(Diminishing Increment Sort),它是把记录按下标的一定增量分组,对每组使用直接插入排序算法排序:随着增量逐渐减 ...
- 在 CMake 中使用 Qt windeploy 进行 install
install(TARGETS app BUNDLE DESTINATION . LIBRARY DESTINATION ${CMAKE_INSTALL_LIBDIR} RUNTIME DESTINA ...
- 如何使用 Helm 在 K8s 上集成 Prometheus 和 Grafana｜Part 3
在本教程的前两部分,我们分别了解和学习了Prometheus 和 Grafana 的基本概念和使用的前提条件,以及使用 Helm 在 Kubernetes 上安装 Prometheus. 在今天的教程 ...
- 基于python+django的电影搜索网站-搜索引擎系统设计与实现
该项目是基于python的web类库django开发的一套web网站,给师弟做的课程设计. 本人的研究方向是一项关于搜索的研究项目.在该项目中,笔者开发了一个简单版的搜索网站,实现了对数据库数据的检索 ...
- docker容器中执行GPU环境中的tensorflow和pytorch任务
1. 背景 (1) 业务方提供了一台有GPU的服务器,且已经安装了显卡等组件,cuda版本10.2,具体信息如下 (2) 在裸机上部署anaconda.pytorch.tensorflow较为麻烦,因 ...
- 05-Shell索引数组变量
1.介绍 Shell 支持数组(Array),数组是若干数据的集合,其中的每一份数据都称为数组的元素. 注意Bash Shell 只支持一维数组,不支持多维数组. 2.数组的定义 2.1 语法 在 S ...
- 让vs自动提示没有using的类
默认情况下,没有using的类,敲代码时没有智能提示,需要在[工具]->[选项]中开启
- [转帖]058、集群优化之PD
PD调度基本概念 调度流程 调度中还有这还缺来了merge,例如合并空region. store: 基本信息,容量,剩余空间,读写流量等 region: 范围,副本分布,副本状态,数据量,读写流量等 ...