vue(二)--条件语句
条件语句：v-if v-else v-else-if v-show
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
1.v-if
<body>
<div id="app">
<p v-if="seen">seen=true现在你看到我了</p>
<template v-if="ok">
<h1>ttttt</h1>
<p>技术！</p>
<p>哈哈哈，打字辛苦啊！！！</p>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true
}
})
</script>
</body>
2.v-else
随机数:如若>0.5sorry 出现，否则not sorry出现
<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>
3.v-else-if
<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>
4. v-show
<body>
<div id="app">
<h1 v-show="ok">Hello!</h1>
</div> <script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
</body>
vue(二)--条件语句的更多相关文章
- vue之条件语句小结
vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...
- 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、变量名、条件语句、循环语句、注释）
一.input用法 input在Python中的含义为永远等待,直到用户输入了值,从而将所输入的值赋值另外的一个东西. n=input('请输入......') 接下来用一个例子学习input的用法 ...
- 化简复杂逻辑，编写紧凑的if条件语句（二）：依据if子句顺序化简条件
<化简复杂逻辑,编写紧凑的if条件语句>已经得出了跳.等.飞.异常的各自条件,方便起见这里重新贴一下. 立即跃迁:!a && b && d 等待跃迁:!a ...
- Pyhton编程（二）之变量、用户输入及条件语句
一:变量 变量定义的规则 1)只能由数字.字母.下划线组成(不能以数字开头) 2)不能使用关键字作为变量名 ['and', 'as', 'assert', 'break', 'class', 'con ...
- php条件语句（二）
switch 语句用于根据多个不同条件执行不同动作. PHP Switch 语句 如果您希望有选择地执行若干代码块之一,请使用 switch 语句. 语法 switch (n){case label1 ...
- Python编程基础[条件语句if 循环语句 for，while]（二）
ython条件语句是通过一条或多条语句的执行结果(True或者False)来决定执行的代码块. 可以通过下图来简单了解条件语句的执行过程: if 判断条件: 执行语句……else: 执行语句…… x= ...
随机推荐
- mybatis入门案例分析
mybatis入门案例分析 一.设计模式分析 public class MybatisTest { public static void main(String[] args) throws Exce ...
- springmvc html与jsp解析器
1. 配置多个视图解析器 InternalResourceViewResolver内置了jsp解析器,用于解析jsp页面 此处我们使用了InternalResourceViewResolver,其有一 ...
- ubuntu18.04系统下无外部显示问题解决
记录一下自己作死过程. 由于学习的需要,在windows10下装了ubuntu18.04系统,第一次装这个系统时,也出现了无外部显示,那时候是老师帮忙搞好的,当时没太在意,只是走马关花的看了老师操作了 ...
- C语言遇到的关于清除标准输入缓冲区的问题[编程入门]
关于标准输入缓冲区的一个易犯的小错误 之前写了个简易的登录程序,但显然这不像写Java时那么容易(只要思路对,基本没问题).一不留神就出现了小BUG! 以下是错误的源代码: #include < ...
- Python3(四) 分支、循环、条件与枚举
表达式 表达式(Expression)是运算符(operator)和操作数(operand)所构成的序列 >>> 1 + 1 2 >>> a = [1 ...
- debian 和ubuntu 安装ifconfig 命令
# apt update # apt install net-tools
- linux 下生成随机密码生成器
[root@localhost ~]# yum -y install pwgen [root@localhost ~]# pwgen -ncCyB1 8 1 kei%b3Xa [root@localh ...
- centos7 nginx 启动脚本
[root@localhost ~]# vim /lib/systemd/system/nginx.service [Unit] Description=nginx After=network.tar ...
- Android 7.0新特性“Nougat”（牛轧糖）。
1.Unicode 9支持和全新的emoji表情符号 Android Nougat将会支持Unicode 9,并且会新增大约70种emoji表情符号.这些表情符号大多数都是人形的,并且提供不同的肤色, ...
- [Redis-CentOS7]Redis字符串操作(二)
登录Redis # redis-cli 127.0.0.1:6379> 添加字符串 EX 超期时间60s 127.0.0.1:6379> set username 'leoshi' OK ...