条件渲染
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. ubuntu学习的简单笔记

    l vi编辑器开发步骤 A)输入 vi Hello.java B) 输入 i 插入模式. C)输入 冒号.[保存退出:wq][退出不保存:q!] l 列出当前目录的所有文件:ls 详细信息的列表:ls ...

  2. 如何实现一个php框架系列文章【6】mysql数据库

    实现一个mysql数据库封装需要考虑的问题 使用方便性 采用直接sql语句操作方式.只要会写sql语句,那么将没有其他学习成本. uctphp框架提供的dba辅助封装类,用会之后将爱不释手. 使用前需 ...

  3. java Io流更新文件内容

    package com.hp.io; import java.io.FileOutputStream; import java.io.IOException; public class FileOut ...

  4. css图片精灵

    <ul> <li class="top"> <em>01</em> <p><a href="http:/ ...

  5. jvm内存区域

    概述 jvm内存分为几个区域: 程序计数器 虚拟机栈 本地方法栈 堆 方法区 运行时常量池 直接内存 这些内存区域是在java进程中细分的,为java程序提供服务 不同的区域存储的内容不一样,生命周期 ...

  6. 20个不可思议的 WebGL 示例和演示

    WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示.WebGL 可以为 Canvas 提供硬件3D加速渲 ...

  7. jQuery+css3侧边栏导航菜单

    效果体验:http://hovertree.com/texiao/jquery/37/ 代码如下: <!doctype html> <html lang="zh" ...

  8. js类型检测总结

    类型检测: 类和对象: Call,Apply,Bind

  9. listview侧滑删除

    自定义Listview,向左滑动,右边刚好显示删除按钮: public class SlideListView extends ListView { private int mScreenWidth; ...

  10. 网页万能排版布局插件,web视图定位布局创意技术演示页

    html万能排版布局插件,是不是感觉很强大,原理其实很简单,不过功能很强大哈哈,大量节省排版布局时间啊! test.html <!doctype html> <html> &l ...