50字范文,内容丰富有趣,生活中的好帮手!
50字范文 > Vue中如何实现点击按钮显示内容 点击内容或内容之外的区域隐藏内容

Vue中如何实现点击按钮显示内容 点击内容或内容之外的区域隐藏内容

时间:2022-02-18 11:23:16

相关推荐

Vue中如何实现点击按钮显示内容 点击内容或内容之外的区域隐藏内容

Vue中如何实现点击按钮显示内容,点击内容或内容之外的区域隐藏内容

代码:

<template><div @click="showBox = false" class="box"><button @click.stop="showBox=true">点击显示内容</button><div class="box1" v-show="showBox">我是显示的内容</div><div class="box2">我是其他内容</div></div></template><script>export default {data() {return {showBox: false,};},};</script><style lang="less">.box{width:100vw;height: 100vh;}.box1{width: 200px;height: 200px;background-color: pink;}.box2{width:200px;height: 200px;background-color: powderblue;}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。