第九篇:vue条件语句
好家伙,终于有个简单了的
v-if 条件判断
<div id="app">
<p v-if="seen">现在你看到我了</p> /*判断seen的值后,选择是否输出文本*/
<template v-if="ok">
<h1>菜鸟教程</h1>
<p>学的不仅是技术,更是梦想!</p>
<p>哈哈哈,打字辛苦啊!!!</p>
</template>
</div> <script>
new Vue({
el: '#app',
data: {
seen: true,
ok: true /*判断值都是ture*/
} }) </script>
v-else否则
<div id="app">
<div v-if="Math.random() > 0.5"> /*判断是否大于0.5,是就输出yes*/
YES
</div>
<div v-else> /*否就输入F**k you*/
F**K YOU
</div>
</div> <script>
new Vue({
el: '#app'
})
</script>
v-else-if 大概是?多项选择题
<div id="app">
<div v-if="type === 'A'"> /*这里是多项选择,判断等于哪项,type等于多少就输出对应的一项*/
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>
Tips:1.v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
2.v-show约等于v-if
第九篇:vue条件语句的更多相关文章
- 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 ...
- vue条件语句、循环语句、计算属性、侦听器监听属性
因为 v-if 和v-for是一个指令,所以必须将它添加到一个元素上.但是如果想切换多个元素呢?此时可以把一个 <template> 元素当做不可见的包裹元素,并在上面使用 v-if.最终 ...
- vue - 条件语句
1.与小程序不同之处一,小程序无论变量还是常亮都可以用双向绑定来解决{{}},而vue一旦双(单)引号包起来以后就失效了. 2.注意一点,切记双引号注意不要混淆哈,这里是一排双引号包单引号,那里是一排 ...
- vue之条件语句小结
vue之条件语句小结 v-if, v-else 随机生成一个数字,判断是否大于0.5,然后输出对应信息: <!DOCTYPE html> <html> <head> ...
- vue(二)--条件语句
条件语句:v-if v-else v-else-if v-show v-else .v-else-if 必须跟在 v-if 或者 v-else-if之后. 1.v-if <bo ...
- VBS基础篇 - 条件语句
经常地,当我们编写代码时,我们需要根据不同的判断执行不同操作,我们可以使用条件语句完成这个工作. If...Then...Else 在下面的情况中,您可以使用 If...Then...Else 语句: ...
- Python成长之路第一篇(4)_if,for,while条件语句
有了以上的基本基础,已经上面写的几个小练习,大家肯定有很多的不满,比如查询为什么查询一次就退出了呢?下面我们来学习条件语句 一.万恶的加号 以前我们在print的时候如果要加上变量都有是使用+来作为连 ...
- 第九节,基本条件语句if
条件语句 如果我们希望有效的响应用户的输入,代码就需要具有判断能力.能够让程序进行判断的结构成为条件,条件判断语句返回的是布尔值真或假,真就执行一条线路,假就执行另外一条线路 注意if判断如果怎样,否 ...
随机推荐
- JAVA用for循环打印*三角形
public class Sanjiaoxing { //本节为for循环的嵌套结构练习 public static void main(String[] args) { // TODO Auto-g ...
- 循序渐进 Redis 分布式锁(以及何时不用它)
场景 假设我们有个批处理服务,实现逻辑大致是这样的: 用户在管理后台向批处理服务投递任务: 批处理服务将该任务写入数据库,立即返回: 批处理服务有启动单独线程定时从数据库获取一批未处理(或处理失败)的 ...
- Windows-matlab简易安装-用于数字图像处理
安装 下载链接 解压文件得到 双击setup.exe 主要注意几点 使用文件安装密匙 只需安装这三个即可 将两个文件夹里面的dll文件复制到安装目录的 /bin/win64 目录 两个 .lic 文件 ...
- Vue回炉重造之图片加载性能优化
前言 图片加载优化对于一个网站性能好坏起着至关重要的作用.所以我们使用Vue来操作一波.备注 以下的优化一.优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的 ...
- 集成学习——GBDT(手推公式)
- kali 漏洞扫描
前言 漏洞扫描器是一种能够自动在计算机.信息系统.网络及应用软件中寻找和发现安全弱点的程序.它通过网络对目录系统进行探测,向目标系统发送数据,并将反馈数据与自带的漏洞特征库进行匹配,进而列举目标系统上 ...
- 用Python做了个图片识别系统(附源码)
本项目将使用python3去识别图片是否为色情图片,会使用到PIL这个图像处理库,并且编写算法来划分图像的皮肤区域 介绍一下PIL: PIL(Python Image Library)是一种免费的图像 ...
- Oracle Database 19c (19.3)
https://www.oracle.com/database/technologies/oracle19c-windows-downloads.htmlOracle Database 19c (19 ...
- Java之取余操作 "%"
取模运算与取余运算两个概念有重叠的部分但又不完全一致.主要的区别在于对负整数进行除法运算时操作不同. 对于整形数a,b来说,取模运算或者求余运算的方法都是: 1.求 整数商 c = a / b: 2. ...
- 准备java编程软件与第一个java程序
我们要用的java的编程软件叫做:eclipse windows上安装eclipse 首先需要一个浏览器 要下载eclipse最简单的方式就是在官网下载 官网:https://www.eclipse ...