好资源导航 » 文章资讯 » vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

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

2023-09-07 20:26:05 66

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

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

v-show是控制dom的css样式设置为display:none;来实现,dom还是存在;

实现如下

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

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


关闭

其他方法

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

hidePanel(event){
letdom=document.getElementById("child");
if(dom){
if(!dom.contains(event.target)){
//这句是说如果我们点击到了id为child以外的区域
this.maskShow=false;
}
}
}

全部代码如下

下面谈谈Vue.js里v-if与v-show的区别

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

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

if(condition){
//somecodehere
}else{
//somecodehere,too
}

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

0.5">
Nowyouseeme

Nowyoudon't

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

Hello!

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

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

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

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

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

总结

以上所述是小编给大家介绍的vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐