目录
上一篇文章我们介绍了计算器这个案例，重点是巩固在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
三、内容-总结
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
