vue指令:显示切换、属性绑定
v-show
根据表达式真假,切换元素的显示和隐藏 (操纵样式)
原理是修改元素的 display ,实现显示隐藏
指令后面的内容,最终都会解析成布尔值
值为== true 时显示==,值为 false 时隐藏
数据改变之后,对应元素的显示状态会同步更新
<div id="app">
<button @click="add">点击累加</button>
<img src="images/pic1.jpg" alt="" v-show="isShow" @click="changeIsShow">
<!--isShow值为true时显示图片-->
<img src="images/pic1.jpg" alt="" v-show="age>=18">
<!--age大于等于18时显示图片-->
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
isShow: true,
age: 1
},
methods: {
changeIsShow: function() {
this.isShow = !this.isShow;
},
add: function()