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语句效率高,但是身为小白的我并没有在代码中看出有什么不同.去度娘找了半个小 ...
随机推荐
- golang reflect 反射机制的使用场景
Go语言中的 reflect 包提供了运行时反射机制,允许程序在运行时检查和操作任意对象的数据类型和值. 以下是 reflect 包的一些典型使用场景: 1. 动态类型判断与转换:当需要处理多种类型的 ...
- 增补博客 第六篇 python 电子算盘
珠算测试器 题目描述]设计一个珠算测试器,要求能够完成珠算加减法的测试.具体的要求功能如下:(1)用户启动测试,输入用户名后系统随机生成特定数目的加减法测试题:(2) 要求测试使用表盘式或数字时秒表进 ...
- Java对称加解密算法AES
Java对称加解密算法AES import org.apache.commons.codec.binary.Base64; import org.apache.commons.lang3.String ...
- 云服务器通过内网穿透的方式ssh访问内网服务器
云服务器通过内网穿透的方式ssh访问内网服务器 背景 买了一台云服务器,了解到可以通过外部服务器连接到公司内部服务器. 为了加快办公的效率,配置了一下. 以Ubuntu为例. 原文(有删改):http ...
- gcc系列工具 介绍
编译器相关知识学习 GNU GCC简介 GNU GCC是一套面向嵌入式领域的交叉编译工具,支持多种编程语言.多种优化选项并且能够支持分步编译.支持多种反汇编方式.支持多种调试信息格式,目前支持X86. ...
- 使用VS Code 学习算法(第四版)
最近在学习算法(第四版),书中一直在使用命令行来执行Java程序,而使用Eclipse时,很难使用命令行,或者说我根本就不会用,于是就想研究一下使用VS Code来编写代码,使用命令行来执行程序.看了 ...
- 解密Prompt系列33. LLM之图表理解任务-多模态篇
上一章我们介绍了纯文本模态的表格理解任务,这一章我们聚焦多模态图表数据.先讨论下单纯使用prompt的情况下,图片和文字模态哪种表格模型理解的效果更好更好,再说下和表格相关的图表理解任务的微调方案. ...
- 常用 Java 组件和框架分类
WEB 容器 Tomcat https://tomcat.apache.org/ Jetty https://www.jetty.com/ JBoss https://www.jboss.org/ R ...
- 【nvm、node、npm、nrm】安装配置教程（windows版）
一.nvm 的安装与配置 1.nvm 下载与安装 nvm官方下载地址 (我这里使用当前最新版本 1.1.12) 2.验证 nvm 是否安装成功 # 查看 nvm 版本 nvm -v # 显示远程可安装 ...
- 类、事件与对象---Dad&Mom简单练习
目的: 模拟一个家庭日常发生的场景:妈妈做好饭,说:"开饭了!",这是爸爸听到了妈妈的喊话就立马动身开始饭吃.而儿子此时正在打游戏,于是他就说:"等我打完这把游戏再吃!& ...