Vue中如何实现点击按钮显示内容，点击内容或内容之外的区域隐藏内容
<template>
<div @click="showBox = false" class="box">
<button @="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>