<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>条件渲染</title>

</head>

<body>

<!--v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销-->

<!--如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好-->

<div id="example1">

    <h2 v-if="type === 'A'">A</h2>

    <h2 v-else-if="type === 'B'">B</h2>

    <h2 v-else-if="type === 'C'">C</h2>

    <h2 v-else>Not A/B/C</h2>

</div>

<div id="example2" v-show="ok">Hello Vue.</div>

<script type="text/javascript" src="vue.min.js"></script>

<script>

    let vm1 = new Vue({

        el: '#example1',

        data: {

            type: 'B'

        }

    });

    let vm2 = new Vue({

        el: '#example2',

        data: {

            ok: true

        }

    })

</script>

</body>

</html>

Vue学习（四）：条件渲染的更多相关文章

  1. day 83 Vue学习四之过滤器、钩子函数、路由、全家桶等

    Vue学习四之过滤器.钩子函数.路由.全家桶等   本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤 ...

  2. Vue.js学习 Item7 -- 条件渲染与列表渲染

    v-if 在字符串模板中,如 Handlebars,我们得像这样写一个条件块: <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1 ...

  3. 关于vue.js中条件渲染的练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  4. Vue学习四：v-if及v-show指令使用方法

    本文为博主原创,未经允许不得转载: <!DOCTYPE html> <html lang="zh"> <head> <meta http- ...

  5. Vue 样式绑定 && 条件渲染

    1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...

  6. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  7. Vue 基础自查——条件渲染和列表渲染

    v-if和v-show的区别是什么? v-if和v-for为什么不能一起用? v-for中的key有什么作用? 1 v-if 和 v-show 1.1 作用 都用来控制元素的显示和隐藏 1.2 控制元 ...

  8. 3-6 Vue中的条件渲染

    本次案例讲解:v-if,v-show,v-else,v-else-if和key值的相关用法!!! v-if指令: //通过一个(v-if)指令 ,可以结合js表达式的返回值,决定一个标签是否在页面上展 ...

  9. Vue指令之条件渲染

    1. v-show 根据表达式的真假值,切换元素的 display CSS属性.表达式为false时,p标签被赋予 style="display:none;" <p v-sh ...

  10. 【Vue】Vue学习(四)-状态管理中心Vuex的简单使用

    一.vuex的简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.Vuex背后的基本思想,就是前面所说的单向数据流.图4就是Vuex实现单向数据流的示意图.    Store     ...

随机推荐

  1. Caffe计算net、layer向前向后传播时间

    在caffe中计算某个model的整个net以及各个layer的向前向后传播时间,可以使用下面的命令格式: ./build/tools/caffe time --model=examples/mnis ...

  2. 【转】异步的AsyncHttpClient使用详解

    http://blog.csdn.net/angjunqiang/article/details/55259170 背景 前面的一篇文章[同步的HttpClient使用详解]中,提到了服务端通进行网络 ...

  3. 自己做的HTML

    <html> <body background="http://img1.imgtn.bdimg.com/it/u=821335874,2927998559&fm= ...

  4. Python学习之路——文件操作

    文件操作分三步:打开文件,读写文件,关闭文件.读取操作时没有给read函数加括号,会出现下面这样的车祸 >>> data = open('/home/supersun/Documen ...

  5. C#实现文件上传以及文件下载

    public ActionResult Upload() { // var pathUrl = "http://" + Request.Url.Authority; var fil ...

  6. ISCC 2018——write up

    WEB Web1-比较数字大小 直接修改input 标签里的maxlength 为999突破长度限制,使得能输入大于999 的数,然后随便输一个数字就行了 或者post修改值 Web2-Web01 s ...

  7. ABAP术语-Business Object

    Business Object 原文:http://www.cnblogs.com/qiangsheng/archive/2008/01/07/1028364.html Represents a ce ...

  8. jsp+spring+jquery+ajax的简单例子

    初学b/s编程,花费了许多时间,进度颇慢! 不过终于完成了一个简单的例子: jsp代码 <%@ page language="java" contentType=" ...

  9. 使用Python读取Dbf文件

    DBF:一种特殊的文件格式!表示数据库文件,Foxbase,Dbase,Visual FoxPro等数据库处理系统所产生的数据库文件! DBF 数据库是常用的桌面型数据库,它曾经被各企业.事业单位广泛 ...

  10. Java中事务总结详解（精华）

    1.什么是JAVA事务? 通常的观念认为,事务仅与数据库相关. 事务必须服从ISO/IEC所制定的ACID原则.ACID是原子性(atomicity).一致性(consistency).隔离性 (is ...