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

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

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

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

实现如下

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

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

其他方法

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

全部代码如下

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

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

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

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

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

总结

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