vue-learning:4-template-v-if-and-v-show
控制元素可见性的指令 v-if 和 v-show
v-if
v-else
v-else-if
:多重判断template
:分组渲染包裹元素key
:管理可复用元素v-show
v-if
与v-show
的区别v-if=expression
和v-show=expression
中truthy
和falsy
真假值
v-if 指令
v-if="value"
当value为真值时,绑定的元素显示;为假值时,绑定的元素不会被写入页面。
假值falsy包括`false` , `nudefined`, `null`, `NaN`, `""`,除此为真值truthy
<div id="example">
<p v-if="isMorning">Good morning</p>
<p v-if="isAfternoon">Good afternoon</p>
<p v-if="isEvening">Good evening</p>
</div>
<script>
var hours = new Date().getHours();
new Vue({
el: "#app",
data: {
isMorning: hours < 12,
isAfternoon: hours >= 12 && hours < 18,
isEvening: hours >= 18,
}
)}
</script>
v-else
同if/else
一样,v-if
也可以与v-else
配合使用。非此即彼
<div v-if="true">Day</div>
<div v-else>night</div>
`v-else`不能单独使用,必须与`v-if`配合使用。但`v-if`可以独立使用。
v-else-if
多重判断,可以使用v-else-if
<div id="example">
<p v-if="now === 'morning'">Good morning</p>
<p v-else-if="now === 'afternoon'">Good afternoon</p>
<p v-else-if="now === 'evening'">Good evening</p>
<p v-else>now is wrong</p>
</div>
<script>
new Vue({
el: "#app",
data: {
now: "morning" // afternoon or evening or other
}
)}
</script>
template
分组元素作为整块渲染,可以使用<template>
作为虚拟的包裹元素,条件渲染分组,最终的渲染结果将不包含 <template>
元素
<template v-if="true">
<p>1</p>
<p>2</p>
<p>3</p>
</template>
<template v-else>
<p>一</p>
<p>二</p>
<p>三</p>
</template>
1
2
3
当然实际上,你也可以对分组元素包裹一个真正块状标签,如<div>
标签,只是这样做会让页面多出一些无谓元素。
<div v-if="true">
<p>1</p>
<p>2</p>
<p>3</p>
</div>
<div v-else>
<p>一</p>
<p>二</p>
<p>三</p>
</div>
key 管理可复用的元素
Vue 框架的高效性体现在会尽可能复用已渲染的元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。
例如:模拟登录页面的输入框,允许用户选择不同的登录方式。那么在上面的代码中切换 loginType 将不会清除用户在切换前已经输入的内容。因为两个模板使用了相同的元素lable
和input
,如果用户没输入任何内容,也仅input
框替换了它的 placeholder。
代码中出现事件绑定指定`v-on:click`和逻辑层的方法`methods`,此节可忽略,后面会讲解。
<!-- 在input没有内容时点击按钮切换,和在input输入内容后再点击按钮切换,观察input的值变化 -->
<div id="app">
<!--不添加key的效果 -->
<template v-if="!key">
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
</template>
<!--添加key的效果 -->
<template v-else>
<template v-if="loginType === 'username'" >
<label>Username</label>
<input placeholder="Enter your username" key="uername">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email">
</template>
</template>
<button v-on:click="handleToggle">点击切换</button>
<br/>
<br/>
<button v-on:click="changeKey">点击切换有KEY和无KEY的情形</button>
</div>
new Vue({
el: "#app",
data: {
loginType: "username",
key: false,
text: "点击看有KEY的情况"
},
methods: {
handleToggle() {
if (this.loginType === "username") {
this.loginType = "email"
} else if (this.loginType === "email") {
this.loginType = "username"
}
},
changeKey() {
this.key = !this.key
}
}
})
v-show指令
v-show
的写法与v-if
完全一样,看下在这段代码,在页面最终显示结果完全一样,但审查元素elements中的元素结构是不一样。
<div id="app">
<div v-if = "true"> day </div>
<div v-if = "false"> night </div>
<br/>
<div v-show = "true">day</div>
<div v-show = "false">night</div>
</div>
v-if`和v-show的区别
v-if指令为假值时,绑定的元素不会显示,Vue也不会生成对应的DOM元素,等到为真假时才创建并添加到DOM树中。
v-if指令每次显示都会创建元素并插入DOM树中,每次隐藏都会从DOM树中删除,绑定元素的显示和隐藏都需要更新DOM树。并且在v-if真假值的切换过程中,条件块内的事件监听器和子组件也会适当地被销毁和重建。所以v-if指令有很大的性能开销。
v-show绑定的元素只在初始阶段被创建,并保留在 DOM 中。元素的显示与隐藏只是添加或删除元素的 CSS 属性 display:none。
v-show 不支持 <template> 分组包裹元素,也不支持 v-else
所以如果某块内容需要频繁切换显示和隐藏,那最好用v-show
指令绑定。
另外v-show
也可能用于图片加载的优化。如果元素中包含图片,那么使用v-show
绑定图片的父节点,一旦为真值时,图片会马上显示出来,因为在v-show
为假值时图片已经被加载。如果是v-if
指令,图片会等到v-if
变为真值时才开始加载。
v-if=expression和v-show=expression值可以是表达式返回的truthy / falsy值
同{{}}插值中可以进行简单的表达式运算一样,v-if
和v-show
的值也可以是表达式,只要表达的结果是 truthy
真值 或 falsy
虚值 的值即可。
在 JavaScript 中,Truthy (真值)指的是在 布尔值 上下文中转换后的值为真的值。所有值都是真值
falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值。即false,0,"",null,undefined 和 NaN。
<div id="app">
<p v-if="hours < 12">Good morning</p>
<p v-if="hours >= 12 && hours < 18">Good afternoon</p>
<p v-show="hours > 18">Good evening</p>
</div>
<div id="app">
<p v-if="obj.prop">如果属性值为truthy时显示,为falsy时不显示</p>
<p v-show="arr[1]">也可以是数组中的某项值为truthy时显示,为falsy时隐藏</p>
</div>
vue-learning:4-template-v-if-and-v-show的更多相关文章
- vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...
- 小白学习VUE第二课:环境搭建 VUE Node.js VSCode template模板
环境搭建 VUE Node.js VSCode template模板: 首先安装node:http://www.runoob.com/nodejs/nodejs-install-setup.html ...
- Vue系列:如何将百度地图包装成Vue的组件
主要分解为如下步骤: (1)在html文件中引入百度地图, <script type="text/javascript" src="http://api.map.b ...
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- Deep learning:四十九(RNN-RBM简单理解)
前言: 本文主要是bengio的deep learning tutorial教程主页中最后一个sample:rnn-rbm in polyphonic music. 即用RNN-RBM来model复调 ...
- Deep learning:四十六(DropConnect简单理解)
和maxout(maxout简单理解)一样,DropConnect也是在ICML2013上发表的,同样也是为了提高Deep Network的泛化能力的,两者都号称是对Dropout(Dropout简单 ...
- Vue.js:轻量高效的前端组件化方案(转载)
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- 转载 Deep learning:六(regularized logistic回归练习)
前言: 在上一讲Deep learning:五(regularized线性回归练习)中已经介绍了regularization项在线性回归问题中的应用,这节主要是练习regularization项在lo ...
- 组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战:个人博客第一版(axios+router)
前言 今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
随机推荐
- MUI - 打开页面默认弹出键盘及返回关闭键盘
打开页面默认弹出键盘及返回关闭键盘 http://www.cnblogs.com/phillyx/ (function(keyboard) { var openSoftKeyboard = funct ...
- SqlSugar 笔记
分组: 日期分组一: var result = await temp .GroupBy("date_format(Day,'%Y-%m')") .Select(s => ne ...
- @bzoj - 4298@ [ONTAK2015]Bajtocja
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定d张无向图,每张图都有n个点.一开始,在任何一张图中都没有任 ...
- git push的时候每次都要输入用户名和密码的问题解决
换了个ssh key,发现每次git push origin master的时候都要输入用户名和密码 原因是在添加远程库的时候使用了https的方式..所以每次都要用https的方式push到远程库 ...
- hdu 3652 【数位dp】
hdu 3652 题意:求1到n中包含'13'('13'不一定连续)且能被13整除的数的个数. 这是我第一道比较了能看懂的数位dp.定义状态dp[pos][res][sta]表示处理到第pos位,模的 ...
- IDI Open 2016 H 字符串模拟题
H - Palindrome Names 题意:给定一个字符串,每次可以向末尾添加一个字符或者更改一个字符.求使得字符串为回文串(从前往后和从后往前读一样)所花费的最小步数. 题解: 看来需要多思考啊 ...
- 阿里靠什么支撑 EB 级计算力?
作者 关涛 阿里云智能事业群 研究员 导读:MaxCompute 是阿里EB级计算平台,经过十年磨砺,它成为阿里巴巴集团数据中台的计算核心和阿里云大数据的基础服务.去年MaxCompute 做了哪些工 ...
- 使用jQuery的 autocomplete 实现输入框 自动提示补全
参考网址: https://www.cnblogs.com/jinzhiming/p/6768402.html 插件下载地址: 链接:https://pan.baidu.com/s/1SpP3hixZ ...
- Spring AOP 的@Aspect
Spring AOP 的@Aspect 转自:http://blog.csdn.net/tanghw/article/details/3862987 从Spring 2.0开始,可以使用基于sch ...
- @hdu - 6428@ Problem C. Calculate
目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定 A, B, C,求: \[\sum_{i=1}^{A}\s ...