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. 论文笔记：《OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks DeepLearning 》

    一.Abstract综述 训练出一个CNN可以同时实现分类,定位和检测..,三个任务共用同一个CNN网络,只是在pool5之后有所不同 二.分类 这里CNN的结构是对ALEXNET做了一些改进,具体的 ...

  2. jquery 获取被点击元素的id属性值

    有时候可能需要获取被点击元素的一些信息,此处就以id属性为例子,进行演示一下. $(document).click(function (e){ var v_id=e.target.id; consol ...

  3. 【转】axios的基本使用

    axios的基本使用 vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的 axios 基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中 ...

  4. 控制cxGrid 主从表的明细只展开一个

    procedure TForm.ADetailDataControllerCollapsing( ADataController: TcxCustomDataController; ARecordIn ...

  5. 《挑战程序设计竞赛》P196 铺砖问题

    题意:给定n*m格子,每个格子被染成了黑色或者白色,现在要用1*2的砖块覆盖这些格子,块与块不得重叠,且覆盖所有的白色格子,但不覆盖任意一个黑色格子,求一共有多少种覆盖方法. 思路:书上给的思路太巧妙 ...

  6. C#设计模式视频教程（不知道讲的好不好，刚刚看到）

    原文发布时间为:2008-12-08 -- 来源于本人的百度文章 [由搬家工具导入] http://u.youku.com/user_video/uid_happyboy27.html 优酷网。。

  7. What and How in an Application

    Basically, two concerntrations: 1. What: business docs and prototype design 2. How: technical docs a ...

  8. poj 3623 Best Cow Line, Gold 后缀数组 + 贪心

    题目链接 题目描述 对于一个给定的字符串,可以从左右两端取字符,依次排列构成一个新的字符串. 求可能构成的字符串中字典序 最小的一个. 例:ACDBCB -> ABCBCD 思路 参考自 xue ...

  9. 《手把手教你学C语言》学习笔记（9）--- 程序的选择控制

    C语言是面向过程编程语言的主要代表,其特征就是严格控制程序的执行语句顺序,因此,C程序的主要结构控制就是顺序控制,以main函数为入口函数,根据控制,一条一条地执行语句.由于实际需求是很复杂的,只用顺 ...

  10. VMware Workstation/Fusion 中安装 Fedora 23/24 及其他 Linux 系统时使用 Open VM Tools 代替 VMware Tools 增强工具的方法

    VMware Workstation/Fusion 分别是 Windows/Linux 和 macOS 下面对应的桌面虚拟化软件.过去,在 VMware 中安装了操作系统虚拟机后,需要在虚拟机中再安装 ...