Heim > Artikel > Web-Frontend > So verwenden Sie vue.js, um zu erkennen, dass das Popup-Fenster nur einmal abgespielt wird
In diesem Artikel erfahren Sie anhand eines Codebeispiels ausführlich, wie Sie die Funktion des einmaligen Öffnens des Popup-Felds realisieren. Lassen Sie es uns gemeinsam lernen und teilen.
Der Kerncode ist der getCookie()-Teil, und das Anzeigen und Ausblenden des Popup-Felds wird in create() gesteuert.
<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>
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
Wie implementiert man den optimierten Stil in Vue (ausführliches Tutorial)
Wie erstellt man benutzerdefinierte globale Vue-Komponenten?
So implementieren Sie die mehrseitige Entwicklung in vue2.0
Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue.js, um zu erkennen, dass das Popup-Fenster nur einmal abgespielt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!