<!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. Ajax综合应用大全(全面解析)

      AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术. AJAX = 异步 JavaScrip ...

  2. 【洛谷P2216】[HAOI2007]理想的正方形

    理想的正方形 [题目描述] 一个a*b的矩阵,从中取一个n*n的子矩阵,使所选矩阵中的最大数与最小数的差最小. 思路: 二维的滑动窗口 对于每行:用一个单调队列维护,算出每个长度为n的区间的最大值和最 ...

  3. 【luogu P4114 Qtree1】 题解

    题目链接:https://www.luogu.org/problemnew/show/P4114 1.把边权转化到点权:选取连接这条边的两个点中较深的一个. 2.查询点到点之间的边权时,要从seg[x ...

  4. Angular将填入表单的数据渲染到表格

    一.项目简介 我们将采用Angular框架来做一个demo,这个demo将要实现的功能如下: 在X坐标和Y坐标文本框输入信息,然后点击添加,就会在下面表格 中出现一项相应的数据,点击每一项旁边的删除按 ...

  5. TCP套接字

    端口的概念 每个电脑一根网线,但是你挂着QQ的同时还可以浏览网页.两个不同应用的数据在同一根网线里是如何传输的呢?根据七层互联网模型,这个功能由运输层(TCP是运输层主要协议)实现.怎么实现呢,在网络 ...

  6. Python基础—04-流程控制

    流程控制 循环结构(while) 格式 while 表达式: 语句块 执行流程:当程序执行到while语句时,首先判断表达式的真假.若表达式的值为真,则执行对应的语句块,之后返回while继续判断表达 ...

  7. flask笔记(二)

    Flask中的路由 查看整个flask中的路由映射关系 app.url_map from flask import Flask app = Flask(__name__) @app.route(&qu ...

  8. 『ACM C++』Virtual Judge | 两道基础题 - The Architect Omar && Malek and Summer Semester

    这几天一直在宿舍跑PY模型,学校的ACM寒假集训我也没去成,来学校的时候已经18号了,突然加进去也就上一天然后排位赛了,没学什么就去打怕是要被虐成渣,今天开学前一天,看到最后有一场大的排位赛,就上去试 ...

  9. 青蛙的约会（exgcd/扩展欧几里得）

    题目描述 两只青蛙在网上相识了,它们聊得很开心,于是觉得很有必要见一面.它们很高兴地发现它们住在同一条纬度线上,于是它们约定各自朝西跳,直到碰面为止.可是它们出发之前忘记了一件很重要的事情,既没有问清 ...

  10. CentOS上安装oracle11g报错处理

    ​ 最近,在处理oracle gateway的报错问题.只因个人的测试环境已经迁移到docker上了,又懒得装一套环境就直接在机器上安装oracle11g.今天分享的故事就从此开始-- 运行环境 项目 ...