条件渲染
v-if
template v-if
v-show
v-else
v-if 与 v-show
 
handlebars.js
1、v-if

如果我们想一次 控制 多个元素呢?
我们可以吧一个<template>元素当做包装元素,并在上面使用v-if。

2、 v-show
<h1 v-show="ok">hello!</h1>
 
v-if与v-show的不同:
第一:v-if是选择性渲染,true才渲染;而v-show始终渲染,只是控制display的可见性。
第二:v-if支持template控制多个元素;而v-show不支持template。

3、v-else
(1)v-else元素必须 立即跟在 v-if 或者 v-show元素的后面——否则不会被识别。
v-else指令,必须跟v-if或者v-show成对使用。
 
(2)一般来说 要是频繁切换用v-show,如果 在运行时条件不大可能改 为v-if较好。

(3)v-if不支持 嵌套

 

vue.js第七课的更多相关文章

  1. vue.js第六课

    class与style绑定 绑定HTML class 对象语法 数组语法 绑定内联样式 对象语法 数组语法 自动添加前缀 1.class与style绑定. 数据绑定一个常见需求就是 操作元素的clas ...

  2. vue.js 第五课

    计算属性 1.基础例子 2.计算属性 vs $watch 3.计算 setter 4.计算属性开发实务demo   1.计算属性 computed( 电脑computer) (区别普通属性) 计算属性 ...

  3. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  4. vue.js 第三课

    1.构造器 constructor 2.属性和方法 properties methods 3.实例生命周期 instance_lifecycle   1.vue.js都是通过 var vm=new V ...

  5. vue.js 第八课

    列表渲染 v-for template v-for 数组变动检查 变异方法 替换数组 track-by track-by $index 问题 对象 v-for 值域 v-for 显示过滤/排序的结果 ...

  6. 【three.js第七课】鼠标点击事件和键盘按键事件的使用

    当我们使用鼠标操作three.js渲染出的对象时,不仅仅只是仅限用鼠标对场景的放大.缩小.旋转而已,还有鼠标左键.右键的点击以及键盘各种按键等等的事件.我们需要捕获这些事件,并在这些事件的方法里进行相 ...

  7. Vue.js入门第一课

    这个好像比ANGULAR.JS要轻量一些,看看. <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  8. Vue.js(七)

    ES6 默认导出(只能一次)与默认导入 默认导出: // 当前文件模块为 test.js // 定义私有成员 a 和 c let a = 10 let c = 20 // 外界访问不到变量 d ,因为 ...

  9. vue.js 第十课-第十六课

    第十课: http://note.youdao.com/noteshare?id=25b5ba45286464856f21eb4b6b391ecd&sub=19C4429995384F72BD ...

随机推荐

  1. 【工具】VS2010常用调试技巧(1)

    调试是一个程序员最基本的技能,其重要性不言自明.不会调试的程序员就意味着他即使会一门语言,却不能编制出好的软件.本文就本人在开发过程中常用的调试技巧作下简单呢介绍,希望对大家有所帮助,能力超群者请绕道 ...

  2. Chart: Who pays the most in Seattle for software engineers

    http://www.geekwire.com/2012/chart-pays-seattle-software-engineers/ Chart: Who pays the most in Seat ...

  3. SIMLock锁卡功能解析

    一.锁卡背景介绍 锁卡即SIMLock,当手机开机启动或者插入SIM卡时,手机modem侧预置在NV项中的配置信息会与SIM卡中的信息做比对,检测是否匹配.若匹配,则SIM卡可以正常使用.若不匹配,则 ...

  4. Servlet3.0的可插拔功能

    如果说 3.0 版本新增的注解支持是为了简化 Servlet/ 过滤器 / 监听器的声明,从而使得 web.xml 变为可选配置, 那么新增的可插性 (pluggability) 支持则将 Servl ...

  5. Placeholder如何换行

    使用js动态添加标签充,处理换行问题 var placeholder = 'This is a line \nthis should be a new line'; $('textarea').att ...

  6. atom配置web开发环境

    1. 安装包 1.1 apm命令 自带apm ,没有菜单栏找install shell commands apm全称:atom package management apm installl [包的名 ...

  7. iosselect:一个js picker项目,在H5中实现IOS的下拉效果

    iosselect是在webapp下的一个picker组件,可以轻松实现各类选择器效果.比如地区选择 时间选择 日期选择等. 下面是一个地址选择器demo截图,可以访问:http://zhoushen ...

  8. 如何用CSS画三角形

    很多时候页面都需要一个或者多个小型三角形!多数人直接用PS扣个图片预览 下面用CSS简单画几个最终效果如下图 <div class="border-all-color"> ...

  9. Date小技巧:set相关操作及应用_获取当前月(季度/年)的最后一天

    set操作还是有不少的,具体见 http://www.w3school.com.cn/jsref/jsref_obj_date.asp, 今天我就只说 setFullYear, setMonth, s ...

  10. [deviceone开发]-底部弹出选择

    一.简介 个人上传的第一个示例源码,两天空闲时间写的,一点简单组件,写的挺乱还没啥注释,仅供新手学习. 底部弹出选择,可滑动选择选项,如果停留在选项中间,可自动校正位置,加了一点简单的动画效果,需要的 ...