vue.js를 사용하여 팝업 상자가 한 번만 재생된다는 것을 인식하는 방법

이 글에서는 팝업창이 한 번만 뜨는 기능을 구현하기 위해 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(&#39;popped&#39;) == &#39;&#39;){ //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에서 다중 페이지 개발을 구현하는 방법

위 내용은 vue.js를 사용하여 팝업 상자가 한 번만 재생된다는 것을 인식하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!