之前的文章我们说了一下 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 进阶之路(五)的更多相关文章

  1. Vue 进阶之路(九)

    之前的文章我们介绍了 vue 中父组件之间的传值,本章我们再来看一下父子组件间传值的参数校验和非 Props 特性. <!DOCTYPE html> <html lang=" ...

  2. Vue 进阶之路(八)

    之前的文章我们对组件 component 进行了简单的介绍,本章我们将深入了解一下组件,并实现父子组件间的传值. <!DOCTYPE html> <html lang="e ...

  3. Vue 进阶之路(七)

    之前的文章我们对 vue 的列表输出做了介绍,本章我们来看一下 vue 的组件 component. <!DOCTYPE html> <html lang="en" ...

  4. Vue 进阶之路(六)

    上篇文章我们分析了一下 vue 中的条件渲染,本篇我们说一下 vue 中的列表渲染和 set 方法. <!DOCTYPE html> <html lang="en" ...

  5. Vue 进阶之路(四)

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的样式绑定. 现在我们想要是想这样一个需求,页面上有个单词,当我们点击它的时候颜色变为红色,再点击一次变为原来的颜色 ...

  6. Vue 进阶之路(三)

    之前的文章我们已经对 vue 有了初步认识,这篇文章我们通过一个例子说一下 vue 的方法 methods,计算属性 computed 和监听器 watch. 现在我们有一个需求,变量 firstNa ...

  7. Vue 进阶之路(二)

    之前的文章我们初识了 vue,对其原理,数据绑定和方法进行了简单的演示,本篇将对 vue 插值表达式,v-text,v-html 进行讲解. <!DOCTYPE html> <htm ...

  8. Vue 进阶之路(一)

    vue 3.x 马上就要问世了,显然尤大大是不想让我们好好活了,但是转念一想,比你优秀的人都还在努力,那我们努力还有什么用,开个玩笑而已,本人对于 vue 的接触时间不长,对其也没有深入地去研究源码, ...

  9. Vue 进阶之路(十)

    之前的文章介绍了 vue 的组件化,本章我们来看一下 vue 中组件的原生事件. <!DOCTYPE html> <html lang="en"> < ...

随机推荐

  1. 黄文俊:Serverless小程序后端技术分享

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 黄文俊,现任腾讯云SCF无服务器云函数高级产品经理,多年企业级系统开发和架构工作经验,对企业级存储.容器平台.微服务架构.无服务器计算等领域 ...

  2. sql server数据字符串分割功能sql

    --分割字符串函数 create FUNCTION [dbo].[GetSplitStringValueInIndex] ( ), --要分割的字符串 ), --分隔符号 @index INT --取 ...

  3. Fibonacci数列使用迭代器实现

    Fibonacci数列,数列中第一个数为0,第二个数为1,其后的每一个数都可由前两个数相加得到: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, ... class FibItera ...

  4. Struts标签库详解【1】

    struts2标签详解 要在jsp中使用Struts2的标志,先要指明标志的引入.通过jsp的代码的顶部加入以下的代码: <%@taglib prefix="s" uri=& ...

  5. Project facet Java version 1.8 not supported JDK版本不对无法启动项目解决办法

    https://jingyan.baidu.com/article/6c67b1d69a59a02787bb1e30.html

  6. jQuery.on() 函数详解 【转载】

    注意事项 1:on()为指定元素的一个或多个事件绑定事件处理函数.(可传递参数) 2:从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind(). d ...

  7. Immutable(不可变)集合

    Immutable(不可变)集合 不可变集合,顾名思义就是说集合是不可被修改的.集合的数据项是在创建的时候提供,并且在整个生命周期中都不可改变. 为什么要用immutable对象?immutable对 ...

  8. lease.go

    package ) type:]...) :]...) )*time.Second) )     go func() {         select {         case <-stop ...

  9. 【刷水】之USACO2008资格赛(Bzoj1599-1603)

    做之前真是没想到有这么水>.< 但做了还是发上来吧>.< 就当是刷一刷AC量&1A率什么的>.< Bzoj1599: [Usaco2008 Oct]笨重的石 ...

  10. B20J_2007_[Noi2010]海拔_平面图最小割转对偶图+堆优化Dij

    B20J_2007_[Noi2010]海拔_平面图最小割转对偶图+堆优化Dij 题意:城市被东西向和南北向的主干道划分为n×n个区域.城市中包括(n+1)×(n+1)个交叉路口和2n×(n+1)条双向 ...