vue 如何在一定时间后隐藏元素？

Question

我正在用 vue 开发一个网上商店应用程序，当我将某些产品添加到购物车时，我需要显示一个文本，该文本将显示该元素已添加到购物车。但是过了一段时间，我需要隐藏文本。我怎样才能做到这一点？，当您单击“添加到购物车”按钮时，会显示此文本。已添加到购物车！

在安装中我试过这个：

   mounted() {
   setTimeout(()=>{
    this.isAdded=false
      },1000)
}

但没有任何效果，文本仍然出现

Answer 1

new Vue({
  el: "#demo",
  data() {
    return {
      isAdded: false
    }
  },
  methods: {
    add() {
      this.isAdded = true
      setTimeout(()=>{
        this.isAdded = false
      }, 2000);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <button @click="add">add</button>
  <h1 v-if="isAdded">
    added
  </h1>
</div>

vue 如何在一定时间后隐藏元素？

How to hide elemets after certain time in vue?

settimeout

vue.js