vue.js如何在弹框中添加一个列表的内容

发布网友 发布时间:2022-04-23 16:40

我来回答

3个回答

懂视网 时间:2022-04-23 01:19

本篇文章通过代码实例给大家详细讲述了一个vue的实例,实现只弹一次弹框功能,一起学习分享下。

核心代码是 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>

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Vue中如何实现精简版风格(详细教程)

vue自定义全局组件该怎么做?

在vue2.0中如何实现多页面的开发

热心网友 时间:2022-04-22 22:27

创建模态框(弹框)

在这弹框DOM中用v-for渲染列表数据

热心网友 时间:2022-04-22 23:45

问题在明确点 最好有点图啥的

声明声明:本网页内容为用户发布,旨在传播知识,不代表本网认同其观点,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。E-MAIL:11247931@qq.com