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. 论文笔记《Fully Convolutional Networks for Semantic Segmentation》

    一.Abstract 提出了一种end-to-end的做semantic segmentation的方法,也就是FCN,是我个人觉得非常厉害的一个方法. 二.亮点 1.提出了全卷积网络的概念,将Ale ...

  2. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  3. mysql 排序字段与索引有关系吗?

    mysql 排序字段与索引有关系吗?答案与否需要你explain一下你的sql脚本 另外记住:date_add()方法会影响Index_modify_time索引(即:时间字段索引)  一般遇到这样的 ...

  4. Codevs 2460 == BZOJ 1036 树的统计

     2460 树的统计 2008年省队选拔赛浙江 时间限制: 2 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 一棵树上有n个节点,编号分别为1 ...

  5. SQL server 数据连接池使用情况检测

    1.依据HOST_NAME请求session_id 查询 select DB_NAME(database_id) dbname,login_name,t1.session_id,t1.request_ ...

  6. Windows消息钩取

    @author: dlive @date: 2016/12/19 0x01 SetWindowsHookEx() HHOOK SetWindowsHookEx( int idHook, //hook ...

  7. android基本控件学习-----ProgressBar

    ProgressBar(进度条)讲解 一.常用属性和基础使用实例 (1)常用属性: android:max:进度条的最大值 android:progress:进度条已完成进度值 android:pro ...

  8. LeetCode OJ-- Populating Next Right Pointers in Each Node II **@

    https://oj.leetcode.com/problems/populating-next-right-pointers-in-each-node-ii/ 接上一题目,输入的树不是perfect ...

  9. springBoot 环境

    环境约束 jdk1.8:Spring Boot 推荐jdk1.7及以上:maven3.x:maven 3.3以上版本:Apache Maven 3.3.9.IntelliJIDEA2017:Intel ...

  10. SpringBoot整合MyBatisPlus配置动态数据源

    目录 SpringBoot整合MyBatisPlus配置动态数据源 SpringBoot整合MyBatisPlus配置动态数据源 推文:2018开源中国最受欢迎的中国软件MyBatis-Plus My ...