vue实现弹框遮罩点击其他区域弹框关闭及v与v-show的区别介绍

vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框,简单的思路是以一个div作为遮罩,控制其的v (v-show)即可,掌握到技巧既可以任意扩展。

　　

v是直接删除dom节点,就是这个div就不存在了

　　

v-show是控制dom的css样式设置为显示:没有;来实现,dom还是存在,

　　 　　

实现如下

　　

maskshow来控制控制遮罩的显示隐藏,绑定一个时间点击遮罩的时候关闭它

　　 　　 　　& lt; div类="面具" v-show=癿askShow @click”=皊etMaskShow”比; 　　& lt;/div> 　　 　　

有一个弹框它的显示和遮罩一样,里面有个关闭按钮也可以关闭弹框,函数里只需要将maskShow值取反即可

　　 　　 　　& lt; div类="孩子" v-show=癿askShow”比; 　　& lt;按钮@click=" setMaskShow "祝辞关闭& lt;/button> 　　& lt;/div> 　　 　　

<强>其他方法

　　

点击时候触发该方法,判断点的区域

　　 　　 　　hidePanel(事件){ 　　让dom=. getelementbyid(“子”); 　　如果(dom) { 　　如果(! dom.contains (event.target)) {//这句是说如果我们点击到了id为孩子以外的区域 　　这一点。maskShow=false; 　　} 　　} 　　} 　　 　　

全部代码如下

　　 　　 　　& lt; template> 　　& lt; div类=案盖住北? 　　& lt; div类="面具" v-show=癿askShow @click”=皊etMaskShow祝辞& lt;/div> 　　& lt; div类="孩子" id="孩子" v-show=癿askShow”比; 　　& lt;按钮@click=" setMaskShow "祝辞关闭& lt;/button> 　　& lt;/div> 　　& lt;按钮@click=" setMaskShow "祝辞click 　　& lt;/div> 　　& lt;/template> 　　 　　& lt; script> 　　出口默认{ 　　数据:函数(){ 　　返回{ 　　maskShow:假的, 　　} 　　}, 　　方法:{ 　　setMaskShow () { 　　这一点。maskShow=! this.maskShow; 　　} 　　} 　　} 　　& lt;/script> 　　 　　& lt; style> 　　.father { 　　宽度:100%; 　　高度:100%; 　　} 　　.mask { 　　宽度:100%; 　　高度:100%; 　　位置:固定; 　　上图:0; 　　左:0; 　　背景:# 000; 　　透明度:0.3; 　　} 　　按钮{ 　　宽度:100 px; 　　高度:40像素; 　　行高:40像素; 　　text-align:中心; 　　} 　　.child { 　　位置:固定; 　　宽度:400 px; 　　身高:400 px; 　　边界:1 px固体# ccc; 　　text-align:中心; 　　行高:400 px; 　　上图:钙(50% - 200 px); 　　左:钙(50% - 200 px); 　　背景:# fff; 　　} 　　& lt;/style> 　　 　　

　　

,在Vue项目中,v和v-show算是两个用得很频繁的指令,很巧的是它俩在表现上也相似,都是动态显示DOM元素,不过既然是两个不同指令,肯定会有不同的适用场景,带着好奇,让我们在Vue官方文档里一探究竟吧~

　　

对于v大家应该不会陌生,不管哪种编程语言都会有if - else的流程控制。
　　例如,在Java中:

　　 　　 　　如果(条件){//这里一些代码 　　其他}{//一些代码 　　} 　　 　　

当然在Vue。js中,v也是执行这样的功能。稍有不同的是在模板中用v条件渲染一整组,类似地,同时也可使用v-else指令来表示v的“块”:

　　 　　 　　& lt; div v=" math . random()比;0.5”比; 　　现在你看到我 　　& lt;/div> 　　& lt; div v-else> 　　现在你不 　　& lt;/div> 　　 　　

另一个用于根据条件展示元素的选项是v-show指令,用法大致一样:

　　 　　 　　& lt; h2 v-show=true>你好! & lt;/h2> 　　 　　

不同的是带有v-show的元素始终会被渲染并保留在DOM中.v-show只是简单地切换元素的显示属性。
　　看到这里大家应该对v与v-show的区别有一个简单的概念了。

　　

接下来将会为大家详细介绍两者的不同:
　　

　　

v是“真正的“条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
　　同时v也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到条件第一次变为真时,才会开始渲染条件块。
　　相比之下,v-show就简单得多,不管初始条件是什么,元素总是会被渲染,并且只是简单地基于CSS进行切换只

　　

所以一般来说,v具有更高的切换开销,而v-show具有更高的初始渲染开销。
　　

　　

因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件不太可能改变,则使用v更好。

vue实现弹框遮罩点击其他区域弹框关闭及v与v-show的区别介绍