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语句效率高,但是身为小白的我并没有在代码中看出有什么不同.去度娘找了半个小 ...
随机推荐
- oracle数据库文件
oracle数据库重要的文件包括参数文件,控制文件,数据文件,临时文件,重做日志文件. 1 参数文件 oracle的参数文件可以设置数据库的名称,SGA和PGA的大小,控制文件的路径等系统参数.这些参 ...
- Asp.net Core 经过nginx代理后获取不到真实ip和scheme的问题
背景 我最近在一个Asp.net core Web 程序在经过nginx代理后 ,总是获取不到用户真实i和scheme(HttpContext.Request.Scheme),挠头: 我们一般从请求头 ...
- Operational Property Graphs到底是个啥？
Operational Property Graphs,中文通常译为"操作属性图". 作为23ai中被官方highlight出的新特性之一,我们先看下官方的原文描述: Operat ...
- pycharm中运行jupyter notebook
进入anaconda prompt,进入对应的虚拟环境 输入jupyter notebook,找到路径和token 这两个随便复制一个,注意是包括token也要复制到 然后打开pycharm,并建立一 ...
- 使用 GPU 进行 Lightmap 烘焙 - 简单 demo
作者:i_dovelemon 日期:2024-06-16 主题:Lightmap, PathTracer, Compute Shader 引言 一直以来,我都对离线 bake lightmap 操作很 ...
- WPF/C#：如何实现拖拉元素
前言 在Canvas中放置了一些元素,需要能够拖拉这些元素,在WPF Samples中的DragDropObjects项目中告诉了我们如何实现这种效果. 效果如下所示: 拖拉过程中的效果如下所示: 具 ...
- 设备树DTS 学习： 4-uboot 传递 dtb 给 内核
背景 得到 dtb 文件以后,我们需要想办法下载到 板子中,并给 Linux 内核使用. (高级版本的 uboot也有了 自己使用设备树支持,我们这里不讨论 uboot 使用的设备树) Linux 内 ...
- 嵌入式工业开发板基础测试手册——基于NXP iMX6ULL开发板（1）
前 言 本文档适用开发环境: Windows开发环境:Windows 7 64bit.Windows 10 64bit 虚拟机:VMware15.1.0 Linux开发环境:Ubuntu18.04.4 ...
- awk脚本结合shell使用
需求:判断hadoop用户是否存在**************************************************#!/bin/bashresult=`awk -F ": ...
- GraqphQL 学习
GraphQL是Graph+QL.Graph是图,描述数据最好的方式是图数据结构(包括树),数据和数据之间,有像图一样的联系,以图的思维来考虑数据.QL是query language,像写query语 ...