Javascript

Vue基础 第五讲笔记:v-show、v-if、v-bind

本文主要是介绍Vue基础 第五讲笔记:v-show、v-if、v-bind,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、v-show

根据真假切换元素的显示状态。

注意:
1、原理是修改元素display,实现显示隐藏。
2、指令后面的内容,最终都会解释为布尔值。
3、值为true元素显示,值为false元素隐藏。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示状态" @click="changeIsShow">
			<img v-show="isShow" src="img/zhongqiu.jpg" alt="">
			<input type="button" value="增加年龄" @click="addAge">
			<img v-show="age>=18" src="img/zhongqiu.jpg" alt="">
		</div>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					age:15
				},
				methods:{
					changeIsShow:function(){
						this.isShow = !this.isShow;
					},
					addAge:function(){
						this.age++;
					}
				}
			})
		</script>
	</body>
</html>

结果:
初始结果:
在这里插入图片描述
点击切换显示状态:
在这里插入图片描述
点击三次增加年龄:
在这里插入图片描述

二、v-if

根据表达式的真假切换元素的显示状态。

注意:
1、本质是通过操纵dom元素来切换显示状态。
2、表达式的值为true,元素存在于dom树中,为false,从dom树中移除。
3、频繁的切换使用v-show,反之使用v-if,前者的切换消耗小。
dom实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="切换显示" @click="toggleIsShow">
			<p v-if="isShow">哈哈哈 v-if</p>
			<p v-show="isShow">哈哈哈 v-show</p>
			<h2 v-if="temperature>=35">热死啦</h2>
		</div>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false,
					temperature:40
				},
				methods:{
					toggleIsShow:function(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

结果:
在这里插入图片描述
在这里插入图片描述
分析:
点击前:
在这里插入图片描述
点击后:
在这里插入图片描述

三、v-bind

设置元素的属性

注意:
1、完整写法是 v-bind:属性名。
2、简写的话可以直接省略 v-bind,只保留 :属性名
3、需要动态增删clss建议使用对象的方式。

实例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			.active{
				border:10px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" alt="" v-bind:title="imgTitle"> 
			<br>
			<!-- 三元表达式 -->
			<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" 
			:class="isActive?'active':''" @click="toggleActive">
			<br>
			<!-- 对象方式,建议使用 -->
			<img :src="imgSrc" alt="" :title="imgTitle+'!!!'" 
			:class="{active:isActive}" @click="toggleActive">
		</div>
		<!-- 导入开发版本的Vue -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"img/zhongqiu.jpg",
					imgTitle:"中秋",
					isActive:false
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

结果:
在这里插入图片描述
点击图片二或者图片三:
在这里插入图片描述

这篇关于Vue基础 第五讲笔记:v-show、v-if、v-bind的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!