<!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. mysql安装下载

    简单介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL是最 ...

  2. 【luogu P3390 矩阵快速幂】 模板

    题目链接:https://www.luogu.org/problemnew/show/P3390 首先要明白矩阵乘法是什么 对于矩阵A m*p  与  B p*n 的矩阵 得到C m*n 的矩阵 矩阵 ...

  3. data-ng-show 指令

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  4. neo4j 安装步骤 转自：http://blog.csdn.net/luoluowushengmimi/article/details/19987995

    1. Neo4j简介 Neo4j是一个用Java实现的.高性能的.NoSQL图形数据库.Neo4j 使用图(graph)相关的概念来描述数据模型,通过图中的节点和节点的关系来建模.Neo4j完全兼容A ...

  5. 怎么得到scrollTop

    我们学习一个事件 :  页面滚动效果 window.onscroll = function() { 页面滚动语句  } 谷歌浏览器 和没有声明 DTD  <DOCTYPE     > : ...

  6. Java 依赖、关联、聚合和组合

    必须转一个,写的太好了! https://blog.csdn.net/zhengzhb/article/details/7190158

  7. 看我如何使用IDEA引入GitHub上的Maven项目，从Clone到打开，图文步骤，你绝对看的懂！！

    废话不多说,就一个字:干! 1.登录GitHub,复制项目仓库的地址 2.打开IDEA,选择git(三种方式选择) 第一种方式: 第二种方式: 第三种方式: 选择git后 3.下面是我改存放的目录 正 ...

  8. 配置Github秘钥

    Git安装完成后,需要手动配置ssh密钥 配置github的ssh密钥: (1)打开Git Bash查看电脑上是否已经存在SSH密钥: 输入 cd ~/.ssh 若如上图显示无法找到该文件则要创建新的 ...

  9. WordPress博客插件程序:搜索下拉框openSug

    百度搜索框下拉提示Wordpress组插件. 下载地址:https://www.opensug.org/faq/wp-content/uploads/2018/12/opensug.wordpress ...

  10. scrapy爬取伯乐在线文章数据

    创建项目 切换到ArticleSpider目录下创建爬虫文件 设置settings.py爬虫协议为False 编写启动爬虫文件main.py