vue之条件判断v-if与v-show
1.背景
2.v-if简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
v-if的原理：
v-if后面的条件为false时，对应的元素以及其子元素不会渲染。
也就是根本没有不会有对应的标签出现在DOM中。
</pre>
<hr>
当前分数为:{{number}}
<br>
分数等级为:
<p v-if="number>=90">A</p>
<p v-else-if="number>=80">B</p>
<p v-else-if="number>=70">C</p>
<p v-else-if="number>=60">D</p>
<p v-else>E</p> </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '条件判断-if使用',
name: 'ldp',
number: 60
}
});
</script>
</body>
</html>
3.v-if实现切换账号登录类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
需求:
假设做一个登录页面
默认使用微信登录,点击切换按钮,可以使用QQ登录
</pre>
<hr>
<div>
<span v-if="type==='QQ'">
<label>QQ号:</label>
<input placeholder="请输入QQ账号">
</span>
<span v-else>
<label>微信号:</label>
<input placeholder="请输入微信号">
</span>
<button @click="changeType">账号类型切换</button>
</div>
<hr>
<div>
<pre>
1.问题：
如果我们在有输入内容的情况下，切换了类型，我们会发现文字依然显示之前的输入的内容。
但是按道理讲，我们应该切换到另外一个input元素中了。
在另一个input元素中，我们并没有输入内容。
为什么会出现这个问题呢？ 2.原因：
这是因为Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。
在上面的案例中，Vue内部会发现原来的input元素不再使用，直接作为else中的input来使用了。 3.解决方案：
如果我们不希望Vue出现类似重复利用的问题，可以给对应的input添加key
并且我们需要保证key的不同
</pre>
</div>
<hr>
<div>
<span v-if="type==='QQ'">
<label>QQ号:</label>
<input placeholder="请输入QQ账号" key="qq-input">
</span>
<span v-else>
<label>微信号:</label>
<input placeholder="请输入微信号" key="wx-input">
</span>
<button @click="changeType">账号类型切换</button>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '条件判断-if实现账号登录切换',
name: 'ldp',
type: 'QQ'
},
methods: {
changeType() {
this.type = this.type === 'QQ' ? 'WX' : 'QQ'
}
}
});
</script>
</body>
</html>
4.v-if与v-show的区别
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h3>{{title}}</h3>
<pre>
v-show的用法和v-if非常相似，也用于决定一个元素是否渲染： v-if和v-show对比
v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？
v-if当条件为false时，压根不会有对应的元素在DOM中。
v-show当条件为false时，仅仅是将元素的display属性设置为none而已。 开发中如何选择呢？
当需要在显示与隐藏之间切片很频繁时，使用v-show
当只有一次切换时，通过使用v-if
</pre>
<hr>
<div>
<span v-show="showQQ">
<label>QQ号:</label>
<input placeholder="请输入QQ账号">
</span>
<span v-show="!showQQ">
<label>微信号:</label>
<input placeholder="请输入微信号">
</span>
<button @click="changeType">账号类型切换</button>
</div> </div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '条件判断v-show与if的区别',
name: 'ldp',
showQQ: true
},
methods: {
changeType() {
this.showQQ = this.showQQ ? false : true
}
}
});
</script>
</body>
</html>
完美!
vue之条件判断v-if与v-show的更多相关文章
- 一起学Vue之条件判断
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,本文以一个简单的小例子简述v-if的常见用法,仅供学习分享使用,如有不足之处,还请指正. v-if 指令 ...
- vue v-if条件判断
<view class='circle-G' v-if="item.status === 'G'"></view> <view class='circ ...
- vue学习笔记（二）- 数据绑定、列表渲染、条件判断
vue的数据绑定和列表渲染的造轮子 GitHub:八至 作者:狐狸家的鱼 双向数据绑定 Vue中数据的双向绑定-v-model 数据->页面 页面->数据 适用:input.select. ...
- POJ 2762 Going from u to v or from v to u? （判断单连通）
http://poj.org/problem?id=2762 题意:给出有向图,判断任意两个点u和v,是否可以从u到v或者从v到u. 思路: 判断图是否是单连通的. 首先来一遍强连通缩点,重新建立新图 ...
- POJ - 2762 Going from u to v or from v to u? (强连通缩点+判断单向连通)
题意:判断一个有向图中的任意两点u.v,是否可以由其中一个点到达另一个点. 分析:这个问题转化以后就是:将该图强连通缩点后再判断其是否是单向连通的.缩点用Tarjan处理强连通分量. 有一个定理是这样 ...
- vue数据渲染、条件判断及列表循环
1.数据渲染 {{msg}} <template> <div id="app"> {{msg}} </div> </template&g ...
- vue条件判断循环
条件判断 v-if <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- C# if中连续几个条件判断
C# if中连续几个条件判断 1.if (条件表达式1 && 条件表达式2) 当条件表达式1为true时 using System; using System.Collections. ...
- shell条件判断与流程控制
一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...
- 为什么说在使用多条件判断时switch case语句比if语句效率高？
在学习JavaScript中的if控制语句和switch控制语句的时候,提到了使用多条件判断时switch case语句比if语句效率高,但是身为小白的我并没有在代码中看出有什么不同.去度娘找了半个小 ...
随机推荐
- 以沙箱的方式运行容器:安全容器gvisor
目录 一.系统环境 二.前言 三.安全容器隔离技术简介 四.Gvisor简介 五.容器runtime简介 六.docker容器缺陷 七.配置docker使用gVisor作为runtime 7.1 安装 ...
- 【读论文】CM-Gen: A Neural Framework for Chinese Metaphor Generation with Explicit Context Modelling
为了更好的阅读体验,请点击这里 由于发不出论文,所以找点冷门方向做一做.从汉语比喻开始. 读完这篇论文之后我觉得 COLING 这方向我上我也行(ε=ε=ε=┏(゜ロ゜;)┛ 题目:CM-Gen: A ...
- [好物推荐] Rime的86五笔输入法配置
一个比较好用的Rime五笔输入法配置文件, 个人已经使用很多年了. 官网: https://github.com/KyleBing/rime-wubi86-jidian 安装方式: /home/xxx ...
- Ubuntu 18.04安装xdrp以使用远程桌面
背景 开发环境有一台服务器默认没有屏幕(被我拿走用来拓展屏幕了),有时候需要使用到界面但嫌弃拆显示器太麻烦,因此使用远程桌面来解决这个需求. 做法 安装xrdp sudo apt install -y ...
- STM32 CubeMX 学习：001-GPIO的使用
背景 在上一讲STM32 CubeMX 学习:搭建开发环境中,我们已经利用CubeMx搭建了可编译的工程. 今天就开始来介绍STM32 GPIO的有关知识,以及如何驱动它. HOST-OS : Win ...
- 一文带你深入理解SpringMVC的执行原理
今天大致来看一下Spring MVC的执行流程是什么样的 执行流程:也就是一个请求是怎么到我们Controller的,返回值是怎么给客户端的 本文分析的问题: 文件上传的请求是怎么处理的 跨域是怎么处 ...
- Java定时任务实现优惠码
在Java中实现定时任务来发放优惠码,我们可以使用多种方法,比如使用java.util.Timer类.ScheduledExecutorService接口,或者更高级的框架如Spring的@Sched ...
- bing生成的汉服美女。。
- Java开发常见问题分析和处理方案
程序Bug的产生,通常分为三种类型 逻辑漏洞: 低级错误,程序执行后无法达到想要效果. 越界访问: 访问了非法区域,造成程序崩溃. 条件考虑不全面: 你以为你万无一失,但你永远都不知道输入参数究竟是什 ...
- Java 面向对象编程之接口
什么是接口? 是抽象方法的集合,接口通常以interface来声明,一个类通过继承接口的方式,从而来继承接口的抽象方法 语法 interface 名称 [extends 其他的接⼝名] { // 声明 ...