提示框案例
<script>
window.onload = function () {
var vm = new Vue({
el:".box",
data:{
isShow: false
}
});
}
</script>
<body>
<!-- 03:背景div -->
<div @click='isShow=false' class="box">
<!-- 02:点击的按钮 04:阻止-->
<input @click.stop='isShow=true' type="button" value="弹出弹框" id="btn01">
<!-- 01:弹出框 -->
<div v-show='isShow' class="pop_main" id="pop">
<!-- 白色背景 -->
<!-- 05:阻止父元素监听click事件 -->
<div @click.stop='' class="pop_con">
<div class="pop_title">
<h3>系统提示</h3>
<!-- 06:关闭按钮 -->
<a @click='isShow=false' href="#" id="shutoff" >×</a>
</div>
<div class="pop_detail">
<p class="pop_text">亲!请关注近期的优惠活动!</p>
</div>
<div class="pop_footer">
</div>
</div>
<div class="mask"></div>
</div>
</div>
</body>