<!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. 【题解】UVA1218 Perfect Service

    UVA1218:https://www.luogu.org/problemnew/show/UVA1218 刷紫书DP题ing 思路 参考lrj紫书 不喜勿喷 d(u,0):u是服务器,孩子是不是服务 ...

  2. 消息中间件JMS(三)

    1. Spring整合JMS 1.1消息生产者 创建工程springJMS_producer,并在pom文件中引入SpringJms .activeMQ以及单元测试相关依赖 <propertie ...

  3. requireJs sass侧边栏

    koala 下载 将sass编译为css文件 1 嵌套 2 $变量 3 @mixin 函数名(参数) 4 @include 函数    调用 5 @import "xxx"   引 ...

  4. SqlSugar批量添加修改问题

    直接InsertRange空集合会报错,如果我们是同时执行多个添加或修改,不要共用一个上下文,最好是在方法里面声明上下文进行区分,不然容易报错 //如果同时执行多个添加,更新 操作不要共用一个上下文, ...

  5. 排序算法 JavaScript

    一.冒泡排序 算法介绍: 1.比较相邻的两个元素,如果前一个比后一个大,则交换位置. 2.第一轮把最大的元素放到了最后面. 3.由于每次排序最后一个都是最大的,所以之后按照步骤1排序最后一个元素不用比 ...

  6. html+css让网页自动适应手机屏幕

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...

  7. 缓存&跨域

    一.前端本地缓存的几种实现方式了解一下 缓存的几种实现方式 序号 名称 参考资料 1 serviceWorker  https://blog.csdn.net/ztguang/article/deta ...

  8. Python 学习笔记（八）Python列表（一）

    列表基本操作 列表(list)定义  列表是Python中的一种对象类型,也是一种序列 对象类型:list 表示方法:[ ] python 列表中的元素可以是任何类型的对象 >>> ...

  9. TIDB4 —— 三篇文章了解 TiDB 技术内幕 - 谈调度

    原文地址:https://pingcap.com/blog-cn/tidb-internal-3/ 为什么要进行调度 先回忆一下第一篇文章提到的一些信息,TiKV 集群是 TiDB 数据库的分布式 K ...

  10. Python基础—14-邮件与短信

    邮件与短信 邮件发送 简介: 邮件服务器.账户.密码 相关协议:SMTP.POP3.IMAP 默认TCP协议端口:25 用途:经常用在一个网站的注册激活.通知.找回密码等场景 库:smtplib 示例 ...