条件渲染
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. 【译】Asp.net mvc 使用ITextSharp PDF to HTML (解决img标签问题)

    前言:因项目需求,需要将HTML代码转成PDF.大致上已经实现了,可以是发现使用ITextSharp(我现在的版本是5.5.9)的时候,img标签中的src只能跟绝对路径. 在百度上找了一个上午,有一 ...

  2. C#开发微信门户及应用(4)--关注用户列表及详细信息管理

    在上个月的对C#开发微信门户及应用做了介绍,写过了几篇的随笔进行分享,由于时间关系,间隔了一段时间没有继续写这个系列的博客了,并不是对这个方面停止了研究,而是继续深入探索这方面的技术,为了更好的应用起 ...

  3. Java接口响应超时监控

    为什么要监控 服务化接口是提供服务的,接口正确性.稳定性是最最重要的,在保证正确的同时需要尽量提高接口响应时间. 有的团队会有专门的工具来对系统响应时间.吞吐量做监控,但如果团队没有这种"待 ...

  4. JS 传播事件、取消事件默认行为、阻止事件传播

    1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的o ...

  5. Java面试题整理二(侧重SSH框架)

    1.持久化对象的状态都有哪些? 答:瞬时对象(Transient Objects):使用new 操作符初始化的对象不是立刻就持久的.它们的状态是瞬时的,也就是说它们没有任何跟数据库表相关联的行为,只要 ...

  6. QT数据库连接的几个重要函数的使用及注意事项(原创)

    注:在这里数据库对象等同于数据库连接对象,也就是QSqlDatabase类的对象 QSqlDatabase QSqlDatabase::addDatabase((const QString & ...

  7. python语言中的编码问题(续)

    上文提到了python开发中非常重要的两处设置. 一个是编解码器的默认设置defaultencoding >>> import sys >>> sys.getdef ...

  8. node-sass报错解决方法

    在Vue.js中,每一个vue文件都是一个组件,在.vue文件中可以将模板,脚本,样式写在一起,便于组织整个组件.在使用template,script时,编写css样式时,都进行的特别顺利,唯独当我想 ...

  9. iscroll5实现一个下拉刷新上拉加载的效果

    直接上代码!!! <!DOCTYPE html><html><head lang="en"> <meta charset="UT ...

  10. [转]通过Visual Studio为Linux编写C++代码

    Build 2016大会上Microsoft首次公布的Visual Studio 2015扩展提供了在VS2015中编写C++代码,随后通过Linux/UNIX计算机进行编译和执行的能力.这种想法非常 ...