Vue.2.0.5-条件渲染
2016-11-16 03:27
465 查看
v-if
在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
在 Vue.js ,我们使用
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-show
另一个根据条件展示元素的选项是v-show指令。用法大体上一样:
<h1 v-show="ok">Hello!</h1>
不同的是有
v-show的元素会始终渲染并保持在 DOM 中。
v-show是简单的切换元素的 CSS 属性
display。
注意
v-show不支持
<template>语法。
v-ifvs. v-show
v-if是真实的条件渲染,因为它会确保条件块在切换当中适当地销毁与重建条件块内的事件监听器和子组件。
v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,
v-show简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,
v-if有更高的切换消耗而
v-show有更高的初始渲染消耗。因此,如果需要频繁切换使用
v-show较好,如果在运行时条件不大可能改变则使用
v-if较好。
相关文章推荐
- 深入理解Vue 的条件渲染和列表渲染
- Vue基础之Vue条件渲染
- Vue.js 学习6 条件渲染与列表渲染
- vue.js(7)-条件渲染
- 曹可爱之最可爱-Vue.js入门(六)条件渲染
- 03-Vue入门系列之Vue列表渲染及条件渲染实战
- Vue的条件渲染
- vue.js基础-声明式渲染和条件与循环
- VUE2.0 全套demo讲解 基础4(条件渲染)
- Vue.js-条件渲染
- vue中的条件渲染
- Vue.js实例学习:条件渲染
- Atitit mvc之道 attilax著 以vue为例 1. Atitti vue的几大概念 1 1.1. 声明式渲染 1 1.2. 条件与循环 2 1.3. 处理用户输入 click事件 2 1
- vue-条件渲染
- Vue入门系列(三)之Vue列表渲染及条件渲染实战
- vue.js基础-声明式渲染和条件与循环
- Vue基础:条件渲染、列表渲染、事件处理
- Vue.js 条件渲染 v-if、v-show、v-else
- Vue入门 - 条件渲染与列表渲染
- Vue.js 学习(6) -- Vue指令之:条件渲染