HTML:if-else

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div v-if="Math.random() > 0.5">

      Sorry

    </div>

    <div v-else>

      Not sorry

    </div>

</div>

<script>

new Vue({

  el: '#app'

})

</script>

</body>

</html>

HTML:if-else if-else

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>

<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

    <div v-if="type === 'A'">

      A

    </div>

    <div v-else-if="type === 'B'">

      B

    </div>

    <div v-else-if="type === 'C'">

      C

    </div>

    <div v-else>

      Not A/B/C

    </div>

</div>

<script>

new Vue({

  el: '#app',

  data: {

    type: 'C'

  }

})

</script>

</body>

</html>

v-show

我们也可以使用 v-show 指令来根据条件展示元素：

<h1 v-show="ok">Hello!</h1>

VueJS条件语句：v-if、v-else、v-else-if的更多相关文章

  1. Mybatis-Plus的Service方法使用 之 泛型方法default ＜V＞ List＜V＞ listObjs(Function＜? super Object, V＞ mapper)

    首先 我们先看到的这个方法入参是:Function<? super Object , V> mapper ,这是jdk1.8为了统一简化书写格式引进的函数式接口 . 简单 解释一下我对Fu ...

  2. C++：vector中的v.at(0)和v[0]的区别

    设v是一个vector的对象, 如果v是非空的,则v.at(0)和v[0]是没有区别的,都是取数组中第一个值: 如果v是空的,则v.at(0)会抛出异常(exception std::out_of_r ...

  3. 证明 U and V={0}时 dim(U+V)=dim(U)+dim(V)

    U And V={0} 证明 dim(U+V)=dim(U)+dim(V)设{u1,u2,...,uk} 是U的基,{v1,v2...,vr}是V的基,dim(U)=k ,dim(V)=r dim(U ...

  4. CF F - Tree with Maximum Cost (树形DP)给出你一颗带点权的树，dist(i, j)的值为节点i到j的距离乘上节点j的权值，让你任意找一个节点v，使得dist(v, i) (1 < i < n)的和最大。输出最大的值。

    题目意思: 给出你一颗带点权的树,dist(i, j)的值为节点i到j的距离乘上节点j的权值,让你任意找一个节点v,使得dist(v, i) (1 < i < n)的和最大.输出最大的值. ...

  5. python代码{v: k for k, v in myArray.items()}是什么意思？

    最近在扒vnpy的源码总能看到{v: k for k, v in ORDERTYPE_VT2HUOBI.items()}这样的源码,就是不知道什么意思 然后万能的google找到了Quora的一个类似 ...

  6. go语言的条件语句和循环语句

    一,条件语句 常见的就是if语句: 单支条件语句:     if   条件 :执行语句   (注,如果是没有逻辑运算符连接的话,是可以不需要括号的,也可以加上括号,如:if (条件):执行语句) 双支 ...

  7. Shell 学习笔记之条件语句

    条件语句 if # if if condition then command fi # if else if condition then command else command fi # if e ...

  8. [译]javascript中的条件语句

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  9. 【python基础语法】运算符&if条件语句&while循环&for循环（第5天课堂笔记）

    """ if语法规则: if 条件比较语句1: # 条件成立的时候 会执行的代码 elif 条件比较语句2: # 条件2成立的时候 会执行的代码 else: # 条件不成 ...

随机推荐

  1. BZOJ1415 [Noi2005]聪聪和可可 【SPFA + 期望dp记忆化搜索】

    题目 输入格式 数据的第1行为两个整数N和E,以空格分隔,分别表示森林中的景点数和连接相邻景点的路的条数. 第2行包含两个整数C和M,以空格分隔,分别表示初始时聪聪和可可所在的景点的编号. 接下来E行 ...

  2. 个人环境搭建——搭建tomcat

    搭建tomcat 和前几个软件一样,Tomcat 同样是由JAVA开发的,所以,在安装前一定要装好JDK,具体JDK搭建过程参见 个人环境搭建——搭建JDK环境 篇.   系统环境:ubuntu12. ...

  3. df du 的区别

    https://blog.csdn.net/mike8825/article/details/51986405 https://www.cnblogs.com/scl1314/p/7534894.ht ...

  4. float 及 overflow 的理解

    1.CSS 盒子模型: 2.float 支持属性:left right none inherit(部分支持) (1)float 属性影响范围:对紧随其后的块儿级元素起作用. (2)清除浮动常用方法:在 ...

  5. hdu 4293 区间DP

    /* 题目大意:n个人分成若干组,每个人都描叙他们组前面有多少人后面有多少人, 求说真话的人最多有多少个. 解题思路:把同一组的人数统计起来他们组前面有x人后面有y人, num[x+1][n-y]表示 ...

  6. Linux脚本中调用SQL,RMAN脚本

    Linux/Unix shell脚本中调用或执行SQL,RMAN 等为自动化作业以及多次反复执行提供了极大的便利,因此通过Linux/Unix shell来完成Oracle的相关工作,也是DBA必不可 ...

  7. Codeforces Round #393 (Div. 2)

    A. Petr and a calendar time limit per test:2 seconds memory limit per test:256 megabytes input:stand ...

  8. 【SPOJ61】Brackets（线段树）

    题意:给出一个括号序列,要求维护两种操作: 1.将第x位上的括号取反 2.查询当前整个括号序列是否匹配 n<=3e4 思路:线段树维护区间内没有匹配的左右括号数量 pushup时t[p].r=t ...

  9. sql查询字段值只为汉字(桃)

    SELECT * FROM roster WHERE roster.`name` >'zzzzzzzzzz'   //查询roster表中name值为中文的 SELECT * FROM rost ...

  10. maven中的继承和聚合的关系

    maven中的继承和聚合的关系:两者的目的是不一样的,聚合的目的是能够快速的构建项目,继承的目的是减少重复配置.聚合:定义一个聚合模块,然后在pom文件中添加<module></mo ...