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>