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

2021/10/2 23:41:20

编程Tag： vue function 元素 APP bind show false isShow

本文主要是介绍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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

一、v-show

二、v-if

三、v-bind

相关编程文章

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