二、本地应用——Vue指令（2）

最新推荐文章于 2021-07-19 18:15:43 发布

Sean_me

最新推荐文章于 2021-07-19 18:15:43 发布

阅读量57

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/easy_bird/article/details/118889811

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

2、显示切换，属性绑定

v-show指令的作用是根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏，指令后的内容都会被解析为bool值，值为true元素显示，反之隐藏。

案例：通过按钮绑定事件，改变图片的显示状态

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

累加年龄（点击两次显示）：

v-if指令的作用是根据表达式的真假切换元素的显示状态，本质是通过操作dom元素来切换显示状态，表达式的值为true，元素存在于dom树中，反之，从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">sean</p>
			<p v-show="isShow">sean hello!</p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					isShow:false
				},
				methods:{
					toggleIsShow:function(){
						this.isShow = !this.isShow;
					}
				}
			})
		</script>
	</body>
</html>

v-bind的作用是为元素绑定属性，完整写法是v-bind:属性名，可简写为:属性名

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.active{
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<img v-bind:src="imgSrc" /><br />
			<img :src="imgSrc" title="imgTitle + '!!!'" /><br />
			<img :src="imgSrc" title="imgTitle + '!!!'" :class="{active:isActive}" @click="toggleActive()" />
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					imgSrc:"../Web_bilibili/imgs/home.png" ,
					imgTitle:"小房子",
					isActive:"false"
				},
				methods:{
					toggleActive:function(){
						this.isActive = !this.isActive;
					}
				}
			})
		</script>
	</body>
</html>

Sean_me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、本地应用——Vue指令（2）

2、显示切换，属性绑定v-show指令的作用是根据真假切换元素的显示状态，原理是修改元素的display，实现显示隐藏，指令后的内容都会被解析为bool值，值为true元素显示，反之隐藏。案例：通过按钮绑定事件，改变图片的显示状态 <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <b..
复制链接

扫一扫