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"> < ...
随机推荐
- Visual Studio Live Share不完全指北
Visual Studio Live Share是什么? 是VS的一个实时协作开发的扩展工具. github地址:https://github.com/MicrosoftD...文档地址:https: ...
- 使用float属性的一些小技巧
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwAAACJCAIAAACHJsJCAAAKUUlEQVR4nO2dTY8cxRnHd73LLsusDd ...
- php定时执行操作及ob_flush()与flush()的使用
版权声明:本文为博主原创文章,未经博主允许不得转载. http://blog.csdn.net/qq_38125058 一: 每隔30s执行一次,将字符串写入文件 // 30秒执行一次 ignore_ ...
- python 闯关之路三(面向对象与网络编程)
1,简述socket 通信原理 如上图,socket通信建立在应用层与TCP/IP协议组通信(运输层)的中间软件抽象层,它是一组接口,在设计模式中,socket其实就是一个门面模式,它把复杂的TCP/ ...
- webpack4:连奏中的进化
webpack4在2月底的时候发布,这次webpack4有了一个名字"Legato",也就是"连奏"的意思,寓意webpack在不断进化,而且是无缝(no-ga ...
- java并发之ReentrantLock学习理解
简介 java多线程中可以使用synchronized关键字来实现线程间同步互斥,但在jdk1.5中新增加了ReentrantLock类也能实现同样的效果,并且在扩展功能上也更加强大,比如具有嗅探锁定 ...
- 关于java集合类HashMap的理解
一.HashMap概述 HashMap基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了不同步和允许使用 null 之外,HashMap ...
- Socket 聊天工具
package cn.davy.mychat; import org.eclipse.swt.widgets.Display; import org.eclipse.swt.widgets.FontD ...
- centos6 安装配置ss笔记
2018-05-17 centos6 安装配置ss笔记 操作环境:Centos 6 x86_64 bbr 服务器地址:美国 1.准备VPS 在https://www.bwh1.net可购买,购买时已默 ...
- SpringCloud实战-Feign声明式服务调用
在前面的文章中可以发现当我们通过RestTemplate调用其它服务的API时,所需要的参数须在请求的URL中进行拼接,如果参数少的话或许我们还可以忍受,一旦有多个参数的话,这时拼接请求字符串就会效率 ...