class - 如何在方法中添加类 - VUE.js

Question

基本问题，但我仍然无法弄清楚如何基于@click 添加额外的类。我仍然收到错误：无法读取未定义的属性“添加””

methods: {
    hideItems() {

        document.getElementsByClassName('sold').classList.add('hide')
       }
    }

标签： classvue.jsmethodsclick

Answer 1

您可以:class="{ hide: hidden }"在元素上添加属性，其中hiddenVue 组件的布尔属性。这将切换hide元素上的类。

new Vue({
  el: "#app",
  data() {
    return {
      hidden: false,
    };
  },
  methods: {
    toggle() {
      this.hidden = !this.hidden;
    },
  },
});

.hide {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="toggle">
  Toggle visibility
  </button>
  <div :class="{ hide: hidden }">
    Hello
  </div>
</div>