目录
上一篇文章我们介绍了计算器这个案例,重点是巩固在Vue中:如何进行内容的绑定、事件的绑定,
一、v-show指令语法介绍
这一节我们来学习 v-show 这个指令,这个指令的作用是:根据后面表达式的真假,让元素显示或者隐藏。
那么一般有哪些情况需要切换元素的显示状态?
比如说:广告、遮罩层等很多情况都会用到。
那么这个指令怎么使用呢?
经过前面几节指令的学习,我们知道他就是元素内部的属性而已。
下面我们继续学习:来看一个显示图片的状态
第一种写法:硬编码。
这么写是一个固定写死的状态,非常不利于更改。
第二种写法:data中定义属性变量。
为了方便操作更改,我们在data中定义属性变量,这样它就是响应式的。
第三种写法:支持写表达式。
如果元素的显示的条件更为复杂,它还支持写表达式。
无论写什么,v-show它都会解析为布尔值,true是显示,false是隐藏。
二、实例验证测试
1、实例代码:v-show指令的使用_img
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>08_v-show指令的使用_img</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id = "app">
<!-- 第一种:硬编码,固定写死true或false -->
<img v-show="true" src="./img/monkey.gif" /><br>
<!-- 第二种:在data中定义属性变量 -->
<img v-show="isShow" src="./img/monkey.gif" /><br>
<!-- 第三种:支持写表达式 -->
<img v-show="age>=18" src="./img/monkey.gif" /><br>
<input type="button" value="切换显示状态" @click="changeIsShow"></input>
<input type="button" value="累加改变年龄" @click="addAge"></input>
</div>
<script>
var app = new Vue({
el: "#app",
data:{
isShow: true,//默认值为true
age: 17,//默认值为17
},
methods: {//定义方法
changeIsShow:function(){//修改isShow的值
this.isShow = !this.isShow;
},
addAge:function(){//修改age的值
this.age++;
console.log(this.age);
}
},
})
</script>
</body>
</html>
2、效果展示
大家可以点击下面两个按钮看看效果,这里就不演示了
当你在切换的时候,我们去浏览器查看,你会发现它的本质其实就是:切换元素的 display