VueJS条件语句：v-if、v-else、v-else-if
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的更多相关文章
- Mybatis-Plus的Service方法使用 之 泛型方法default ＜V＞ List＜V＞ listObjs(Function＜? super Object, V＞ mapper)
首先 我们先看到的这个方法入参是:Function<? super Object , V> mapper ,这是jdk1.8为了统一简化书写格式引进的函数式接口 . 简单 解释一下我对Fu ...
- C++：vector中的v.at(0)和v[0]的区别
设v是一个vector的对象, 如果v是非空的,则v.at(0)和v[0]是没有区别的,都是取数组中第一个值: 如果v是空的,则v.at(0)会抛出异常(exception std::out_of_r ...
- 证明 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 ...
- 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)的和最大.输出最大的值. ...
- python代码{v: k for k, v in myArray.items()}是什么意思？
最近在扒vnpy的源码总能看到{v: k for k, v in ORDERTYPE_VT2HUOBI.items()}这样的源码,就是不知道什么意思 然后万能的google找到了Quora的一个类似 ...
- go语言的条件语句和循环语句
一,条件语句 常见的就是if语句: 单支条件语句: if 条件 :执行语句 (注,如果是没有逻辑运算符连接的话,是可以不需要括号的,也可以加上括号,如:if (条件):执行语句) 双支 ...
- Shell 学习笔记之条件语句
条件语句 if # if if condition then command fi # if else if condition then command else command fi # if e ...
- [译]javascript中的条件语句
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- 【python基础语法】运算符&if条件语句&while循环&for循环（第5天课堂笔记）
""" if语法规则: if 条件比较语句1: # 条件成立的时候 会执行的代码 elif 条件比较语句2: # 条件2成立的时候 会执行的代码 else: # 条件不成 ...
随机推荐
- POJ2749 Building roads 【2-sat】
题目 Farmer John's farm has N barns, and there are some cows that live in each barn. The cows like to ...
- aplusb 数论
题目描述 SillyHook 要给小朋友出题了,他想,对于初学者,第一题肯定是a+b啊, 但当他出完数据后神奇地发现.in 不见了,只留下了一些.out,他想还原.in,但 情况实在太多了,于是他想要 ...
- [BZOJ2957] 楼房重建 (线段树,递归)
题目链接 Solution 经典的一道线段树题,难点在于如何合并节点. 由于题目要求直线要求不相交,则斜率均大于前面的点即为答案. 所以以斜率为权值. 考虑线段树每一个节点维护两个值: \(Max\) ...
- Python matplotlib 柱状图
matplotlib是python最著名的绘图库,它提供了一整套和matlab相似的命令API,十分适合交互式地进行制图.而且也可以方便地将它作为绘图控件,嵌入GUI应用程序中.它的文档相当完备,并且 ...
- cocoaPod的Podfile文件的创建和内容格式
Podfile创建: 1.终端中,cd到项目总目录(cd +路径名) cd/........./......../...../项目名 2.终端中继续建立Podfile(配置文件) touch Podf ...
- nodejs express 路由并显示html以及访问静态资源设置
var express = require('express'); var http = require('http'); var fs = require('fs'); var app = expr ...
- WKWebView遇到的问题汇总
一.手势放大缩小页面解决方法 1.通过操作webview中scrollview的代理方法来关闭 -(UIView *)viewForZoomingInScrollView:(UIScrollView ...
- 10.1综合强化刷题 Day1 afternoon
一道图论好题(graph) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图, ...
- Codeforces Round #324 (Div. 2) Dima and Lisa 哥德巴赫猜想
原题链接:http://codeforces.com/contest/584/problem/D 题意: 给你一个奇数,让你寻找三个以内素数,使得和为这个奇数. 题解: 这题嘛...瞎比搞搞就好,首先 ...
- 【Kafka】《Kafka权威指南》——分区partition
在上篇的例子里([Kafka]<Kafka权威指南>--写数据), ProducerRecord 对象包含了目标主题.键和值. Kafka 的消息是 一个个 键值对, ProducerRe ...