Vue中的条件

我们在本篇文章中将到学习Vue中的以下条件:

1:v-if

2:v-else

3:v-else-if

4:v-show

 

首先我们来看v-if

<div id="app">
    <p>你能看见我吗?</p>
</div>
let app = new Vue({
    el:"#app",
    data:{
        isShow:true,
    }
})

那么,v-if 怎么使用呢?

我们只需要在标签上加上:

<p v-if="isShow">你能看见我吗?</p>

运行结果:

加上 v-if 后,Vue会去找叫:"isShow",去看看它的条件是否满足,如果满足,则可以看到元素,否则则看不到!

v-if = "xxx",只是判断了条件满足时候,那么我需要判断 false 呢?

<p v-if="!isShow">你能看见我吗?</p>

我们只需要加一个感叹号,就可以了!

运行效果:

啥也没有,在上一篇文章中说过,Vue关注视图层,我们修改data中的属性值,视图会随着dada值的改变而改变

我们打开浏览器控制台,找到colsole

输入:

我们看到,isShow是为true的,这里说一下,刚刚输入的:app:代表Vue实例中绑定的ID,isSho代表dada属性里的某个值

---现在,我们是看不到页面中那个p标签的,

我们只需要修改以下isShow的值

现在,我们将isShow修改为:false

我们又看到这个p元素了!

 

接下来是:v-else

let apps = new Vue({
    el:"#apps",
    data:{
        info:'1',
    }
});
<div id="apps">
    <p v-if="info === '1'">等于1</p>
    <p v-else="">不等于1</p>
</div>

我们在第一个p元素中,判断了 info 是否等于 "1" ,如果等于1,则是:

 

你将会看到"等于1",那么在另一个p元素中,我们写了 v-else

 

我们在控制台修改 info 的值,我们会发现:

"等于1"我们看不到了,我们看到的则是"不等于1"

 

接下来我们看 v-else-if

<div id="apps">
    <p v-if="info === '1'">等于1</p>
    <p v-else-if="info === '2' ">不等于1,那是不是等于2呢?</p>
    <p v-else="">不等于1</p>
</div>
		let apps = new Vue({
			el:"#apps",
			data:{
				info:'2',
			}
		});

第一个p元素判断了:info是否等于"1"

第二个p元素继承了第一个p元素的判断,那么既然不等于"1",那就否则:在判断info是否等于”2“

第三个p元素继承了上两个p元素的逻辑判断,要是两个都不成立,那就会看到第三个p元素了

运行效果:

我们在控制台修改:

则: "不等于1" 的p元素显示

则:"等于1" 的p元素显示

接下来我们看 v-show

说到这,你们会不会想到:既然有 v-show 了,那为什么我没有提:v-hide 呢?

其实,在Vue中,v-show是一个bool类型的,条件满足了那么就显示,否则隐藏,所以,如果有 v-hide ,那岂不是多此一举?

		<div id="app1">
			<p v-show="show">看到我了吗?</p>
		</div>
		let app1 = new Vue({
			el:"#app1",
			data:{
				show:true,
			}
		});

逻辑:当data中的show为:true时,p元素可见,否则不可见!

运行效果

当然,我们并不是判断true和false,也可以这样

		<div id="app1">
			<p v-show="show==='1'">看到我了吗?</p>
		</div>

 

 

说到这里,有些朋友可能会问:

当 v-if 条件为false时,我看不到元素

那么在 v-show 条件为false的时候,我还是看不到,那两者不都是一样看不到吗?为什么非要两个都说?

 

其实,在页面上观察,好像两者并没有差别,但是,我们打开控制台,审查页面元素,你会发现:

....

			<p v-if="info === '1'">等于1</p>
			<p v-else-if="info === '2' ">不等于1,那是不是等于2呢?</p>
			<p v-else="">不等于1</p>

我们审查元素时发现:我们在写的3个P元素,只显示了一个,说明Vue在if   else判断的时候,不满足条件的标签会被移除

那么 v-show 呢?

		<div id="app1">
			<p v-show="show==='1'">如果等于1</p>
			<p v-show="show==='0'">如果等于0</p>
		</div>

我们看到,不符合条件的元素被vue添加了 display 属性,元素并没有被删除!

其实可以简单的理解为:v-if & v-else & v-else-if 将元素删除了,而 v-show 只是给元素添加了 display 属性!

 

大家理解到上述的vue条件了吗?理解了?恭喜你!没有理解?留言!

 

本文章用到的源代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue条件判断</title>
		<script crossorigin="anonymous" integrity="sha384-g92AC94PwdsWZaIpD8bGSldDkIAgSf0X7tZ5Isd6rNXbjILE0EU6vrlj+gWPDMyY" src="https://lib.baomitu.com/vue/2.6.11/vue.common.dev.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="!isShow">你能看见我吗?</p>
			<P></P>
		</div>
		<div id="apps">
			<p v-if="info === '1'">等于1</p>
			<p v-else-if="info === '2' ">不等于1,那是不是等于2呢?</p>
			<p v-else="">不等于1</p>
		</div>
		
		<div id="app1">
			<p v-show="show==='1'">如果等于1</p>
			<p v-show="show==='0'">如果等于0</p>
		</div>
	</body>
	<script>
		let app = new Vue({
			el:"#app",
			data:{
				isShow:true,
			}
		});
		let apps = new Vue({
			el:"#apps",
			data:{
				info:'2',
			}
		});
		let app1 = new Vue({
			el:"#app1",
			data:{
				show:'1',
			}
		});
	</script>
</html>

 

---end

<div> 适用人群 <p> Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 </p> </div> <div> 课程概述 <div style="color:#666666;"> 【讲师介绍】<br /> 讲师职称:<br />               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。<br />             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。 <br /> 【课程介绍】<br /> 技术选型<br /> 开发环境:Eclipse/Idea ,JDK 1.8以上 <br /> 后端技术<br /> 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):    <br /> 持久层框架:MyBatis 3.x + Mybatis-plus 3.x<br /> 日志管理:SLF4J 1.7 + Log4j2 2.7<br /> 工具类:Apache Commons、Jackson 、fastjson、Gson<br /> 权限验证<br /> 前端技术  <br /> Vue  <br /> Vue-cli<br /> ElementUI ---https://element.eleme.io/<br /> JSX (JavaScript Xml)<br /> 前台的权限验证和路由设置<br /> 开发模式  <br />      前后端分离的开发<br /> 数据库 <br />       Mysql5<br /> IDE<br />     Intellij Idea </div> </div>
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页