<style>
img {
width: 200px;
}
</style>
<body>
<div id="app">
<button @click="changeisShow">切换显示状态</button>
<button @click="addAge">累加年龄</button>
<img v-show="isShow" src="image/yy.jpg" alt="">
<img v-show="age>=18" src="image/yy2.jpg" alt="">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
// v-show指令的作用时 根据真假切换元素的显示状态 原理时修改元素的display 实现显示隐藏
// 返回布尔值 true表示显示 false隐藏
var app = new Vue({
el: '#app',
data: {
isShow: true,
age: 16
},
methods: {
changeisShow: function() {
this.isShow = !this.isShow;
},
addAge: function() {
this.age++;
}
}
})
</script>
</body>