Vue 进阶之路（五）
之前的文章我们说了一下 vue 的样式绑定，这篇文章来介绍一下 vue 中的条件渲染，先看下面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="show">{{title}} 1 </p>
<p v-show="show">{{title}} 2 </p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
title: "hello world",
show: true,
},
})
</script>
</body>
</html>
我们在 HTML 内定义了两个 p 标签，并在 p 标签内分别定义了 v-if="show" 和 v-show="show" 两个属性，在 data 里定义了 show: true 的数据，我们通过 v-if 和 v-show 将 p 标签与 vue 实例建立连接，两者的意思均是当 data 里的数据 show 为 true 时显示，为 false 时不显示，结果如下：
我们可以看到当 app.show 数据为 false 时 HTML 代码中的 p 标签内容并没有在页面上显示，那两者有什么区别呢，我们通过控制台看一下 HTML 代码：
以上我们可以看出当 app.show = false；时 v-if 的 p 标签被删除了，而 v-show = false；时的 p 标签是添加了一个 style="display: none"；的样式。
由此我们可以得出，如果是频发操作 DOM 我们建议用 v-show 指令，这样可以有效的减少 DOM 的挂载和删除，那 v-if 有没有更好的用处呢，看一下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<p v-if="show">{{title}} 1 </p>
<p v-else="show">{{title}} 2 </p> </div>
<script>
var app = new Vue({
el: '#app',
data: {
title: "hello world",
show: true,
},
})
</script>
</body>
</html>
我们将上端代码中的 v-show 换成了 v-else，执行代码的意思时就变成了当 data 里的数据 show 为 true 时显示第一个 p 标签里的内容，当 data 里的数据 show 为 false 时显示第二个 p 标签里的内容，结果如下：
当然我们也可以在 v-if 和 v-show 之间再加 v-else-if 的语法，这里就不演示了，需要注意的是如果我们使用这样的方式，那么在这种语法之间不能再添加任何其他的标签，如 <p v-if ></p> <span></span> <p v-else-if ></p> <a></a><p v-else ></p>。
Vue 进阶之路（五）的更多相关文章
- Vue 进阶之路（九）
之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...
- Vue 进阶之路（八）
之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...
- Vue 进阶之路（七）
之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（六）
上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...
- Vue 进阶之路（四）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...
- Vue 进阶之路（三）
之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...
- Vue 进阶之路（二）
之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...
- Vue 进阶之路（一）
vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...
- Vue 进阶之路（十）
之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...
随机推荐
- Windows10 Ubuntu bash 配置 LAMP+JDK+Tomcat
Windows10的Bash省去了装ubuntu虚拟机的麻烦,而且可以直接用Windows下的浏览器去访问了,Exciting有没有,再也不用去忍受日常崩溃的chromium和慢慢的firefox了. ...
- 设计模式的征途—22.中介者（Mediator）模式
我们都用过QQ,它有两种聊天方式:一是私聊,二是群聊.使用QQ群,一个用户就可以向多个用户发送相同的信息和文件,从而无需一一发送,节省大量时间.通过引入群的机制,极大地减少系统中用户之间的两两通信,用 ...
- Java多线程问题
一. Java多线程: Java给多线程编程提供了内置的支持.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务. 多线程是多任务的一种特别的形式,但多线 ...
- 杨老师课堂_Java核心技术下之控制台模拟微博用户注册案例
案例设计背景介绍: 编写一个新浪微博用户注册的程序,要求使用HashSet集合实现. 假设当用户输入用户名.密码.确认密码.生日(输入格式yyyy-mm-dd为正确).手机号码(手机长度为11位,并 ...
- Linux时间子系统之（十四）：tick broadcast framework
专题文档汇总目录 Notes:BroadcastTick作为cpuidle的waker,硬件基础.BroadcastTick嵌入在当前系统Tick框架中.BroadcastTick设备初始化:周期性T ...
- VirtualBox报错：不能为虚拟电脑XXX打开一个新任务
报错产生的背景 今天在这里下载了一个用于VirtualBox的Kali Linux虚拟机文件(使用VirtualBox可以直接打开使用,不用执行安装过程).但是将该文件导入到VirtualBox中之后 ...
- jquery-bootgrid
http://www.jquery-bootgrid.com/GettingStarted 日志是生产环境非常重要的配置,在迁移老的工程到spring-boot时日志的设置兼容很重要,以下是自己在配置 ...
- sql server 高可用故障转移(6)
创建分布式事务处理DTC群集服务 在hsr3 ip 49上继续 \ 输入一个没有冲突的ip地址用作SQL-CL的DTC解析地址:192.168.2.110,通过检测后会在DNS服务器中自动创建一条记录 ...
- nrpe参数传递
如果需要nrpe进行参数传递需要主要一下几个方面: 1.编译nrpe的时候需要增加参数--enable-command-args 2.修改nrpe.cfg文件中参数dont_blame_nrpe=1 ...
- 使用Spring MVC测试Spring Security Oauth2 API
不是因为看到希望了才去坚持,而坚持了才知道没有希望. 前言 在Spring Security源码分析十一:Spring Security OAuth2整合JWT和Spring Boot 2.0 整合 ...