Vue.js 条件渲染
v-if
在字符串模板中,比如 Handlebars,我们得像这样写一个条件块:
|
在 Vue 中,我们使用 v-if
指令实现同样的功能:
|
也可以用 v-else
添加一个“else 块”:
|
在 <template>
元素上使用 v-if
条件渲染分组
因为 v-if
是一个指令,所以必须将它添加到一个元素上。但是如果想切换多个元素呢?此时可以把一个 <template>
元素当做不可见的包裹元素,并在上面使用 v-if
。最终的渲染结果将不包含 <template>
元素。
|
v-else
你可以使用 v-else
指令来表示 v-if
的“else 块”:
|
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。
v-else-if
2.1.0 新增
v-else-if
,顾名思义,充当 v-if
的“else-if 块”,可以连续使用:
|
类似于 v-else
,v-else-if
也必须紧跟在带 v-if
或者 v-else-if
的元素之后。
用 key
管理可复用的元素
Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外,还有其它一些好处。例如,如果你允许用户在不同的登录方式之间切换:
|
那么在上面的代码中切换 loginType
将不会清除用户已经输入的内容。因为两个模板使用了相同的元素,<input>
不会被替换掉——仅仅是替换了它的 placeholder
。
自己动手试一试,在输入框中输入一些文本,然后按下切换按钮:
Username
Toggle login type
这样也不总是符合实际需求,所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的,不要复用它们”。只需添加一个具有唯一值的 key
属性即可:
|
现在,每次切换时,输入框都将被重新渲染。请看:
Username
Toggle login type
注意,<label>
元素仍然会被高效地复用,因为它们没有添加 key
属性。
v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
|
不同的是带有 v-show
的元素始终会被渲染并保留在 DOM 中。v-show
只是简单地切换元素的 CSS 属性 display
。
注意,v-show
不支持 <template>
元素,也不支持 v-else
。
v-if
vs v-show
v-if
是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。
相比之下,v-show
就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if
有更高的切换开销,而 v-show
有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show
较好;如果在运行时条件很少改变,则使用 v-if
较好。
v-if
与 v-for
一起使用
不推荐同时使用 v-if
和 v-for
。请查阅风格指南以获取更多信息。
当 v-if
与 v-for
一起使用时,v-for
具有比 v-if
更高的优先级。请查阅列表渲染指南 以获取详细信息。
from: https://cn.vuejs.org/v2/guide/conditional.html
Vue.js 条件渲染相关推荐
- Vue.js 条件渲染 v-if、v-show、v-else
v-if v-if 完全根据表达式的值在DOM中生成或移除一个元素.如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除:否则,对应元素的一个克隆将被重新插入DOM中. <!DO ...
- Vue之条件渲染v-if和v-show
简介 主要介绍vue的条件渲染的两个指令语法v-if和v-show. <!DOCTYPE html> <html lang="en"> <head&g ...
- vue使用html渲染组件,Vue.js在渲染组件之前填充数据
我是Vue.js的新手,我试图创建一个没有成功的简单组件,它包含一个selectList,我试图填充它的选项数据来模拟Ajax请求,这是我的代码:Vue.js在渲染组件之前填充数据 HTML {{n. ...
- vue隐藏浏览器_一分钟学会Vue的条件渲染和列表渲染
介绍 之前一段时间由于工作很忙,没有时间继续学习Vue,今天算是继续对之前的学习进行补充了,今天要学习的便是Vue的条件渲染和列表渲染,我们将讨论if.if-else.if-else-if,show等 ...
- Vue.js服务器端渲染与Vue路由器:分步指南
当我开始使用Vue收集有关SSR(服务器端渲染)的信息时,我必须从不同的文章以及官方文档中获取相关信息,以便全面了解这个主题. 以下是我在这些来源中发现的一些问题: 很多关于你应该拥有的信息的假设,比 ...
- Vue.js 列表渲染
用 v-for 把一个数组对应为一组元素 我们用 v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 i ...
- Vue的条件渲染指令
与JS的条件语句类似,Vue的条件指令可以根据表达式的值在DOM中渲染或者销毁元素/组件 v-else-if要紧跟v-if,v-else要紧跟v-else-if或者v--if,表达式的值为真时,当前元 ...
- vue 限制渲染条数_深入理解Vue 的条件渲染和列表渲染
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的,而且很重要,所以,今天添加一点小笔记. 条件渲染 v-if 在 < template > 中配合 v-if 渲染一整组 在使用 ...
- Vue的条件渲染和对象渲染
条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏) v-if 条件判断使用 v-if 指令 v-else v-else 指令给 v-if 添加一个 "else" 块 ...
最新文章
- java 调用webservice的各种方法总结
- Python之sklearn-pmml:sklearn-pmml的简介、安装、使用方法之详细攻略
- Mockito对final类型和方法的支持(三):免配置的inline mock making
- 微型计算机与接口技术考试题,微机原理与接口技术试题库2
- Eclipse vs IDEA快捷键对比大全
- 《汇编语言》王爽—第六章实验四详解
- word手写字体以假乱真_轻松制作个人“电子版手写签名”
- 最短路径算法—Dijkstra(迪杰斯特拉)算法分析与实现(C/C++)
- 深度学习:词嵌入Embedding
- SQL Server 2008 白皮书
- Jmeter下载安装详细步骤(最新)
- DupanTools第三方不限速下载工具
- 2019年最新全国省市区街道共46462条数据(统计局MySQL数据库)
- C# Activator实例化类的一般步骤
- 嵌入式linux dlna,DLNA 编译
- 【SpringBoot实战】分布式定时任务锁Shedlock
- C++基础知识 - 多重继承的二义性问题
- DNS域名解析服务--Named服务
- Godaddy ssl续费更新问题总结
- 云服务ECS/RDS:搭建云服务器ECS管理linux,搭建云数据库管理创建RDS MySQL;
热门文章
- Streaming Big Data: Storm, Spark and Samza--转载
- 使用solr的DIHandler 构建mysql大表全量索引,内存溢出问题的解决方法
- MySQL——外部数据的批量导入
- 金融风控实战——信贷评分卡
- LESSON 11.4 原理进阶:AdaBoost算法流程详解
- var_export()函数的使用举例(后续添加其他的php输出函数)
- 腾讯正式进军电商:小鹅拼拼,出自微信
- LambdaMART简介——基于Ranklib源码(一 lambda计算)
- Visual Studio 2013开发 mini-filter driver step by step (2) - 编译,部署,运行
- MySQL - order by和 group by 优化初探