vue之v-show基本使用
vue之v-show基本使用
兮动人
发布于 2021-06-11 12:48:02
发布于 2021-06-11 12:48:02
代码可运行
运行总次数：0
代码可运行
v-show：根据表达值的真假，切换元素的显示和隐藏
- v-show 本质是切换元素的 display
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow"><br>
<img v-show="isShow" src="img/monkey.png" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function () {
this.isShow =! this.isShow;
}
}
})
</script>
</body>- 点击切换状态 显示/隐藏
- 增加 age 累加效果
<body>
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow"><br>
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="img/monkey.png" alt="">
<img v-show="age>=18" src="img/monkey.png" alt="">
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: false,
age: 17
},
methods: {
changeIsShow: function () {
this.isShow =! this.isShow;
},
addAge: function () {
this.age++;
}
}
})
</script>
</body>- 当点击累加年龄时，就会出现 图片，因为默认给定的age=17，累加年龄后就会显示 图片
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021/02/10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
vue之v-if基本使用
更多 >
腾讯云开发者
