vue實現彈框遮罩點擊其他區域彈框關閉及v-if與v-show的區別介紹

<div class="mask" v-show="maskShow" @click="setMaskShow">
</div>

<div class="child" v-show="maskShow">
 <button @click="setMaskShow">關閉</button>
</div>

hidePanel(event) {
 let dom = document.getElementById("child");
 if (dom) {
 if (!dom.contains(event.target)) {
 //這句是說如果我們點擊到了id為child以外的區域
 this.maskShow = false;
 }
 }
}

<template>
 <div class="father">
 <div class="mask" v-show="maskShow" @click="setMaskShow"></div>
 <div class="child" id="child" v-show="maskShow">
 <button @click="setMaskShow">關閉</button>
 </div>
 <button @click="setMaskShow">click</button>
 </div>
</template>

<script>
export default {
 data: function(){
 return {
 maskShow: false,
 }
 },
 methods: {
 setMaskShow(){
 this.maskShow = !this.maskShow;
 }
 }
}
</script>

<style>
.father{
 width: 100%;
 height: 100%;
}
.mask{
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 background: #000;
 opacity: 0.3;
}
button{
 width: 100px;
 height: 40px;
 line-height: 40px;
 text-align: center;
}
.child{
 position: fixed;
 width: 400px;
 height: 400px;
 border: 1px solid #ccc;
 text-align: center;
 line-height: 400px;
 top: calc(50% - 200px);
 left: calc(50% - 200px);
 background: #fff;
}
</style>

if (condition) {
 //some code here
} else {
 //some code here, too
}

<div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div>

<h1 v-show=true>Hello!</h1>