【问题标题】:Hide HTML div once button is clicked with cookies?使用cookie单击按钮后隐藏HTML div?
【发布时间】:2020-09-16 19:55:01
【问题描述】:

我正在尝试隐藏此消息,但在 vue js 中没有成功。

目前我正在使用 js-cookie 库

我真正想做的事:

html

 <div v-show="closeBox()">                     
    <span><a id="closeButton" @click="closeBox()" href="#">Close</a></span>
       <p>som info message</p>
     </div>

javascript:

closeBox(){
    if(#CloseButton.clicked()){ // if the button is clicked (not working in vue js)
    Cookies.set("cookie", "false");
    var cookie = Cookies.get("cookie");
        }
          else
         {
        cookie = true
        }
        return cookie; 

【问题讨论】:

    标签: html vue.js cookies


    【解决方案1】:

    我看到您在单击 span 时试图隐藏/关闭 div

    • 需要在同一个vue组件中注册事件方法。
    • 另外,最好使用反应状态(下面的showBox)来显示/隐藏div

    观看此示例代码...

    <div v-show="showBox">                     
        <span><a id="closeButton" @click.prevent="closeBox" href="#">Close</a></span>
           <p>som info message</p>
         </div>
    
    data() {
      return: {
        showBox: true
      }
    },
    methods: {
      closeBox() {
        this.showBox = false;
        Cookies.set("cookie", "false");
        var cookie = Cookies.get("cookie");
            }
              else
             {
            cookie = true
            }
            return cookie;
            ...
    
    

    【讨论】:

    • 您好,closeBox() 方法似乎未完成。某处不应该有一个“如果”吗?
    • @MishMish 不,您不需要使用 vue 的 if。 showBox 状态处理这个问题。设置为 false 将隐藏 (display: none;) div,因为它通过 v-show 指令依赖于 showBox
    【解决方案2】:

    您可以使用 vanilla js、css 和 HTML 来做到这一点。 在你的 HTML 中:

     <div v-show="closeBox()">                     
        <span><a id="closeButton" @click="closeBox()" href="#">Close</a></span>
           <p id="message">som info message</p>
      </div>
    

    你是js:

    closeBox(){
        let closeButton = document.getElementById("closeButton")
        let message = document.getElementById("message")
        
        if(closeButton.clicked()){  // pseudo code
            message.className += "hide"
            // sets the cookie
           document.cookie = 'cookie=test; expires=Sun, 1 Jan 2023 00:00:00 UTC; path=/'
        }
    }
    

    最后在你的 css 中:

    .hide {
        display: none;
    }
    

    更新

    在答案中添加了设置 cookie。 有关使用 vanilla js 处理 cookie 的更多参考,请关注 this 链接。

    【讨论】:

    • 您好,cookie 是在哪里添加的?
    • @MishMish 问题是关于隐藏 div。但您也可以使用 vanilla js 添加 cookie 我将其添加到答案中。顺便问一下,你为什么写if(button.clicked)?只有单击按钮时才会调用该函数
    【解决方案3】:

    这是我的问题的答案。您可以在其中将 cookie 添加到关闭/隐藏按钮,这样它就不会再次显示,除非用户删除他们的浏览器数据。

    以下是使用js-cookie库实现的

    <template>
      <div v-show="isBoxShowing">
    
        <a @click="closeBox">Close</a>
       
      </div>
    </template>
    
    <script>
    // here you import the cookie lib
    export default {
      data () {
        return {
          isBoxShowing: Cookies.get('cookie') !== 'false'
        }
      },
    
      methods: {
        closeBox () {
          Cookies.set('cookie', 'false')
          this.isBoxShowing = false
        }
      }
    }
    </script>
    

    【讨论】:

      猜你喜欢
      • 2014-08-02
      • 2021-06-14
      • 1970-01-01
      • 1970-01-01
      • 2013-04-05
      • 1970-01-01
      • 2016-01-20
      • 2016-05-21
      • 2021-01-23
      相关资源
      最近更新 更多