这次给大家带来vue.js实现单次弹框，vue.js实现单次弹框的注意事项有哪些，下面就是实战案例，一起来看一下。
核心代码是 getcookie()部分,控制弹框的显示隐藏则在 created()中。
<template>
<p v-if="isshow"> <!--最外层背景-->
<p class="popup_container"> <!--居中的容器-->
<img @click="nopopup" src="delete.png" alt=""> <!--关闭弹框-->
<p class="popup_text"> <!--内容部分-->
lorem ipsum dolor sit amet, consectetur adipisicing elit. at, atque ea eveniet laudantium magni, maiores nam nihil non numquam odio pariatur perferendis placeat quas quasi sit soluta, sunt ullam voluptatibus.
</p>
</p>
</p>
</template>
<script>
export default {
data(){
return{
isshow: true,
}
},
created(){
if (this.getcookie('popped') == ''){ //cookie 中没有 popped 则赋给他一个值（此时弹框显示）
document.cookie = popped = yes;
}else{
this.isshow = false; //若cookie 中已经有 popped 值，则弹框再不会显示
}
},
methods: {
nopopup(){
this.isshow = false;
},
getcookie(name) { //cookie
var search = name + =;
var returnvalue = ;
if (document.cookie.length > 0) {
var offset = document.cookie.indexof(search);
if (offset !== -1) {
offset += search.length;
var end = document.cookie.indexof(;, offset);
if (end == -1){
end = document.cookie.length;
}
returnvalue = decodeuricomponent(document.cookie.substring(offset, end));
}
}
return returnvalue;
},
},
}
</script>
<style scoped>
/*样式部分*/
</style>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
angular2 父子组件通信方式
javascript的代码优化详解
以上就是vue.js实现单次弹框的详细内容。