零基础入门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的控制流程
什么是控制流程?简单来说就是控制程序运行逻辑的,因为程序一般而言不会直接一步运行到底,而是需要加上一些判断,一些循环等等.举个栗子,就好比你准备出门买个苹果,把这个过程当成程序的话,可能需要先判断一下 ...
随机推荐
- 特色国风数字孪生智慧大坝 3D 可视化
前言 水利兴,五谷丰.水利作为国民经济稳定和谐的重要部分,不仅有防洪减灾.农业灌溉.城市供水调水.渔业外贸.旅游航运.生态环境等综合应用,水电资源也是至关重要的可持续能源之一.大坝与水库.水电站等水利 ...
- 【有奖体验】AI 都这么厉害了，可以看图生成文字描述！
立即体验基于函数计算部署[图生文]一键部署图像描述模型: https://developer.aliyun.com/topic/aigc_fc 人工智能生成内容(Artificial Intellig ...
- 如何用 Serverless 一键部署 Stable Diffusion？
思路 其实很简单, 我们只需要将镜像里面的动态路径映射到 NAS文件存储里面即可,利用 NAS 独立存储文件模型,扩展,语言包等,并且我们可以为管理 NAS 单独配置一个可视化的后台,用简单的文件上传 ...
- 一道C语言改错题
下午,在上班,读者发来一道题目,问我怎么做.我大概瞄了一眼,看题目也不难.就先让他自己上网查下. 过了一会,他说查不到,问了群里,大家也不太会. 好吧,起码这位读者自己思考过,也问过了. 题目如下,找 ...
- freeswitch的distributor模块
概述 freeswitch 是一款简单好用的VOIP开源软交换平台. 当呼叫是同一个入中继,但是有多条出中继时,需要对出中继做负载均衡,mod_distributor模块可以完成对应的配置和路由. m ...
- 机器学习-无监督机器学习-主成分分析PCA-23
目录 1. 降维的方式 2. PCA的一般步骤 3. 思想2 最小化投影距离 4. Kernelized PCA 1. 降维的方式 对于维度灾难.数据冗余,这些在数据处理中常见的场景,我们不得不进一步 ...
- Mysql 中 not in 的查询优化
本文为博主原创,转载请注明出处: 最近做性能优化时,通过开启 MySQL 的慢日志查询配置,发现 有一条慢sql,在这里记录下分析和优化的过程. 该慢 sql 如下: select id from f ...
- 分享Go书籍-《Go Web编程》
大家好,我是沙漠尽头的狼. 最近几天在看一本Go的书籍,看了100来页,感觉不错,分享给大家. 书籍基本信息 书籍信息: 书名:Go Web编程 作 者:(新加坡)郑兆雄(Sau Sheong C ...
- [转帖]ntp导致的时钟回拨
https://zhuanlan.zhihu.com/p/587313130 我们的服务器时间校准一般是通过ntp进程去校准的.但由于校准这个动作,会导致时钟跳跃变化的现象.而这种情况里面,往往回拨最 ...
- 阿里的AIGC数据库工具: Chat2DB的学习与使用
阿里的AIGC数据库工具: Chat2DB的学习与使用 背景 今天陪家中老人去完医院后, 继续回来学习时发现 阿里巴巴的 chat2DB已经发布的 2.0.1的版本. 想着下载下来试试. 主要也是备忘 ...