Vue.js教程5-条件渲染
2017-01-17 16:40
766 查看
v-if
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} |
v-if指令实现同样的功能:
<h1 v-if="ok">Yes</h1> |
v-else添加一个 “else” 块:
<h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> |
<template>
中 v-if
条件组
因为 v-if是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢?此时我们可以把一个
<template>元素当做包装元素,并在上面使用
v-if,最终的渲染结果不会包含它。
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template> |
v-else
可以用 v-else指令给
v-if添加一个 “else” 块:
<div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> |
v-else元素必须紧跟在
v-if元素或者
v-else-if的后面——否则它不能被识别。
v-else-if
2.1.0 新增v-else-if,顾名思义,用作
v-if的
else-if块。可以链式的多次使用:
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> |
v-else相似,,
v-else-if必须跟在
v-if或者
v-else-if之后。
使用 key
控制元素的可重用
Vue 尝试尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 更快之外还可以得到一些好处。如下例,当允许用户在不同的登录方式之间切换:<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> |
loginType不会删除用户已经输入的内容,两个模版由于使用了相同的元素,
<input>会被复用,仅仅是替换了他们的
placeholder。
自己动手试一试,输入一些文本,然后点击 「Toggle login type」 进行切换
Username
Toggle login type
这样也不总是符合实际需求,所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性
key,
key必须带有唯一的值。
<template v-if="loginType === 'username'"> <label>Username</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>Email</label> <input placeholder="Enter your email address" key="email-input"> </template> |
Username
Toggle login type
注意,
<label>元素仍然会被复用,因为没有被添加了
key属性。
v-show
另一个根据条件展示元素的选项是 v-show指令。用法大体上一样:
<h1 v-show="ok">Hello!</h1> |
v-show的元素会始终渲染并保持在 DOM 中。
v-show是简单的切换元素的 CSS 属性
display。
注意
v-show不支持
<template>语法。
v-if
vs v-show
v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,
v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,
v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此,如果需要频繁切换使用
v-show较好,如果在运行时条件不大可能改变则使用
v-if较好。
本文由最三方开源平台(http://www.zuisanfang.com/archives/view-2043-1.html)原创,转载请保留版权和链接!
相关文章推荐
- Vue.js 条件渲染 v-if、v-show、v-else
- Vue.js 系列教程 1:渲染,指令,事件
- vue.js基础-声明式渲染和条件与循环
- Vue.js—条件渲染
- 曹可爱之最可爱-Vue.js入门(六)条件渲染
- vue.js条件渲染
- Vue.js教程: 构建一个预渲染SEO友好的应用示例
- vue.js实现条件渲染的实例代码
- Vue.js实例学习:条件渲染
- 学习vue.js条件渲染
- Vue.js 学习(6) -- Vue指令之:条件渲染
- Vue.js学习教程之列表渲染详解
- Vue.js-条件渲染
- Vue.js学习 Item7 -- 条件渲染与列表渲染
- Vue.js教程6-列表渲染
- vue.js 条件渲染
- Vue.js 系列教程 1:渲染,指令,事件
- vue.js(7)-条件渲染
- 初始Vue- Vue.js条件渲染