连载五 v-show 4月11日
没工作自学中,马上毕业了,还没找到工作,哭了,呜呜呜
代码:
<html>
<head>
<meta charset="utf-8">
<title>v-show</title>
</head>
<body>
<div id="app">
<input type="button" value="切换显示状态"@click="changeisshow()" />
<img src="img/bd_logo1.png" v-show="false">
<img src="img/bd_logo1.png" v-show="isshow" />
<img src="img/bd_logo1.png" v-show="age>18" />
<img src="img/bd_logo1.png" v-show="age>10" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue({
el:"#app",
data:{
isshow:true,
age:16
},
methods:{
changeisshow:function(){
this.isshow=!this.isshow
}
}
})
</script>
</body>
</html>
显示
没点击事件前
![在这里插入图片描述](https://img-blog.csdnimg.cn/77e7013a83ee44b1b1ad60ac7c242a53.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZCN5a2X6ZW_5bCx5pyJ5bCP5Y-v54ix6Lef552A5b-1,size_20,color_FFFFFF,t_70,g_se,x_16)
点击事件后:
![在这里插入图片描述](https://img-blog.csdnimg.cn/7b89dee1db2d42eb89eb6ca4f003b6f0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5ZCN5a2X6ZW_5bCx5pyJ5bCP5Y-v54ix6Lef552A5b-1,size_18,color_FFFFFF,t_70,g_se,x_16)