vue之条件语句小结
vue之条件语句小结
v-if, v-else
- 随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-else of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-if="Math.random()>0.5">
<span>随机数大于0.5</span>
</div>
<div v-else>
<span>随机数小于等于0.5</span>
</div>
</div>
<script>
new Vue({
el: "#app",
})
</script>
</body>
</html>
v-else-if
- 在2.1.0新增，顾名思义，用作v-if的else-if 块，可以链式的多次使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-elseif of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="type">
<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:'A'
}
})
</script>
</body>
</html>
- v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-show
使用 v-show 指令来根据条件展示元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-show of vue</title>
<script src="vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-show="ok">show it</div>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
}
})
</script>
</body>
</html>vue之条件语句小结的更多相关文章
- vue(二)--条件语句
条件语句:v-if v-else v-else-if v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- vue条件语句v-if、v-else、v-else-if用法
vue条件语句v-if.v-else.v-else-if用法 v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建.v-if 也是惰性的:如果在初始渲 ...
- vue使用案例，vue初始化，vue初始化方法，vue条件语句，vue在js里面添加元素调用vue方法
<div id="main" > <button id='but1' type="button" v-on:click="save ...
- Python初体验（一）—【配置环境变量】【变量】【input】【条件语句】【循环语句】
写在前面的: 作为一个控制专业的女研究生,不知道每天在研究什么,但总归逃脱不了码代码的命运.之前也学习过一些C语言.C++,基础嘛,稍稍微有一些.本不想走上码农的道路,天真烂漫的过此生(白日梦过程中. ...
- Python —条件语句
条件语句 Python条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: Python程序语言指定任何非0和非空(null ...
- php简写表达式，&& or || 缩写条件语句
有时候学的多了, 好多小细节 都忘了 ,比如 简单的表达式, 三元表达式 ?:; $aa or $bb 表达式 等等! 写一些简单的表达式,备忘! php用&&和||缩写条件语句 ...
- java中的条件语句（if、if...else、多重if、嵌套if）
Java条件语句之 if 生活中,我们经常需要先做判断,然后才决定是否要做某件事情.例如,如果考试成绩大于 90 分,则奖励一个 IPHONE 5S .对于这种"需要先判断条件,条件满足后才 ...
- javascript语句——条件语句、循环语句和跳转语句
× 目录 [1]条件语句 [2]循环语句 [3]跳转语句 前面的话 默认情况下,javascript解释器依照语句的编写顺序依次执行.而javascript中的很多语句可以改变语句的默认执行顺序.本文 ...
随机推荐
- Linux 中设置进程通过 systemctl 启动
对于某些脚本或需要启动命令的程序,可以通过创建 xx.service 服务文件来使用 systemctl 控制. 例如,对于 docker-compose,其后台启动且忽略输出信息的命令为: $ no ...
- 2017/2/27-Laravel_资源控制器命令
用于处理关于图片存储的 HTTP 请求,使用 Artisan 命令 make:controller,我们可以快速创建这样的控制器 : php artisan make:controller Photo ...
- C#将数据写入本地文件
在平时开发过程中,可能会碰到内网测试没问题,但是更新到外网时会报错,这时我们又无法在外网进行调试.如果我们分析完业务可能产生的问题还是无法得到报错的原因,那么可以在关键的地方加上异常处理,然后将异常或 ...
- Emqtt集群搭建
1 Emqtt简单搭建 1.1 介绍:EMQ:EMQ 2.0,号称百万级开源MQTT消息服务器,基于Erlang/OTP语言平台开发,支持大规模连接和分布式集群,发布订阅模式的开源MQTT消息服务器 ...
- 用vultr搭建ss服务器的脚本
原文在此
- 关联查询总结，left join 和 inner join 区别和优化
left join 是做左外关联,主表内容都会显示:符合关联条件的附表内容才会显示出来. inner join 是内关联,没有主表附表的概念:两个表中,同时符合关联条件的数据才会显示出来. left ...
- P2172 [国家集训队]部落战争（最小路径覆盖）
P2172 [国家集训队]部落战争 每个点仅走一次:最小路径覆盖 套路地拆点,具体看代码中的$draw()$ 流量每增加1,意味着一支军队可以多走一格,代价减少1 最后答案即为总点数$-dinic() ...
- 1. ZooKeeper简介
1. ZooKeeper是什么 ZooKeeper致力于提供一个高性能.高可用,且具备严格的顺序访问控制能力的分布式协调服务,是雅虎公司创建,是Google的Chubby一个开源的实现,也是Hadoo ...
- Node.js 中监听 redis key 过期事件
It is in fact possible to listen to the “expired” type keyevent notification using a subscribed clie ...
- Oracle连接远程数据库
我用的事navicat连接工具 方法一: 找到 工具---->环境,OCI环境 选择中间那个(我的是这个,我不确定是不是都一样,可以都试试),选好之后关闭navicat,重新运行navicat ...