Vue#条件渲染
根据不同的条件,响应不同的事件。
https://jsfiddle.net/miloer/zed5p1r3/
可以用template来包装元素,当然浏览器的最终渲染结果不会包含它。我觉得主要用它来自定义模块组件。
<template v-if=“msg”>
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
发现个小问题当JS代码有误的时候,类似于这样,title 后的Vue的逗号是全角的,我以为什么都不会输出,但是JS解析MSG为‘no’j就像这样
https://jsfiddle.net/miloer/zed5p1r3/1/
var vm = new Vue({
el:"#app",
data:{
msg:'true',
title:'Vue',
ok:'ture'
}
})
v-show元素不支持template,v-show的元素始终渲染并保持在DOM中。
v-eles 元素必须紧跟在v-show或者v-if元素模块后,要不然就没法识别了。
关于v-if和v-show使用方法的官方说明:
在切换 v-if
块时,Vue.js 有一个局部编译/卸载过程,因为 v-if
之中的模板也可能包括数据绑定或子组件。v-if
是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if
也是惰性的:如果在初始渲染时条件为假,则什么也不做——在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show
简单得多——元素始终被编译并保留,只是简单地基于 CSS 切换。
一般来说,v-if
有更高的切换消耗而 v-show
有更高的初始渲染消耗。因此,如果需要频繁切换 v-show
较好,如果在运行时条件不大可能改变 v-if
较好。
v-if
- 类型:
*
- 用法:
根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是
<template>
,将提出它的内容作为条件块。 - 另见: 条件渲染
v-show
- 类型:
*
- 用法:
根据表达式的值的真假切换元素的
display
CSS 属性,如果有过渡将触发它。 - 另见: 条件渲染 – v-show
v-else
- 不需要表达式
- 限制: 前一兄弟元素必须有
v-if
或v-show
。 - 用法:
为
v-if
和v-show
添加 “else 块”。<div v-if="Math.random() > 0.5">
Sorry
</div>
<div v-else>
Not sorry
</div> - 另见: 条件渲染 – v-else
template
- 类型:
String
- 详细:
实例模板。模板默认替换挂载元素。如果
replace
选项为false
,模板将插入挂载元素内。两种情况下,挂载元素的内容都将被忽略,除非模板有内容分发 slot。如果值以
#
开始,则它用作选项符,将使用匹配元素的 innerHTML 作为模板。常用的技巧是用<script type="x-template">
包含模板。注意在一些情况下,例如如模板包含多个顶级元素,或只包含普通文本,实例将变成一个片断实例,管理多个节点而不是一个节点。片断实例的挂载元素上的非流程控制指令被忽略。
- 另见:
Vue#条件渲染的更多相关文章
- Vue条件渲染
gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson08 一 v-if显示单个元素 注意else只能跟在v-if或者v-s ...
- [vue]vue条件渲染v-if(template)和自定义指令directives
条件渲染: v-if/template <div id="app"> <h1>v-show: display: none</h1> <di ...
- vue 条件渲染与列表渲染
本文是对官方文档的整理 因为 v-if 是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v ...
- (尚008)Vue条件渲染
1.test008.html <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- vue 条件渲染 v-if v-show
1.要点 1.1 v-if 条件性地渲染一块内容 <h1 v-if="awesome">Vue is awesome!</h1> 附带 / v- ...
- vue条件渲染2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染v-if v-show
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue 条件渲染方式
1.通过class绑定 <div :class="{'div-class': this.align == 'center'}"></div> 对应的css ...
- vue.js选择if(条件渲染)详解
vue.js选择if(条件渲染)详解 一.总结 一句话总结: v-if <!DOCTYPE html> <html lang="en"> <head& ...
随机推荐
- poj 1035
http://poj.org/problem?id=1035 poj的一道字符串的水题,不难,但就是细节问题我也wa了几次 题意就是给你一个字典,再给你一些字符,首先如果字典中有这个字符串,则直接输出 ...
- PHP json_encode / json_decode
2015年3月26日 14:14:16 PHP的json函数对几个特殊值的处理笔记 <?php //----------编码 $a = array(); $b = json_encode($a) ...
- ffmpeg-20160628-git-bin.7z
ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 4 屏幕1/4大小 S 下一帧 [ -2秒 ] +2秒 ; -1秒 ' +1秒 下一个帧 -> -5秒 f ...
- Java for LeetCode 221 Maximal Square
Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...
- rsync使用
1)拷贝本地文件.当SRC和DES路径信息都不包含有单个冒号":"分隔符时就启动这种工作模式. 如:rsync -a ./test.c /backup 2)使用一个远程 ...
- .net在当前日期的基础上加一天
比如今天是:2015-11-10 18:57:01,在这个基础上加一天,那么就是2015-11-11 18:57:01,代码如下: DateTime now_dt = DateTime.Now; ). ...
- -[__NSCFNumber length]: unrecognized selector sent to instance 0xb0000000000000e3
网络数据解析出现-[__NSCFNumber length]: unrecognized selector sent to instance 0xb0000000000000e3这样的错误,具体 re ...
- Xn数列(codevs 1281)
题目描述 Description 给你6个数,m, a, c, x0, n, g Xn+1 = ( aXn + c ) mod m,求Xn m, a, c, x0, n, g<=10^18 输入 ...
- ALT+数字直接取得字符的原理
字符 字节码 utf-8编码 机器二进制码 之间的联系 byte数组与二进制码关系参考文献 例如:字符“我” byte字节码是 [-26, -120, -111] 绝对值源码 [00011010, 0 ...
- ASP.NET 客户端静态文件请求设置缓存(Client Cache)
通常在服务器端大家都已经做了很多缓存的工作,ASP.NET CACHE也好MemeryCache也好却总是忽略了客户端缓存. 因为大家都知道不管哪个client都会缓存已经访问过的站点,但是浏览器缓存 ...