使用cookie单击按钮后隐藏HTML div？答案

【问题标题】：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>

【讨论】：