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

Question

基本问题，但我仍然不知道如何根据@click 添加额外的 class。我仍然收到错误消息：无法读取未定义的属性 'add'"

methods: {
    hideItems() {

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

Answer 1

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

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>

Answer 2

getElementsByClassName return HTMLCollection 所以你需要遍历那个集合。

应该这样做：

methods: {
    hideItems() {
        const items = document.getElementsByClassName('sold');

        for(item of items){
           item.classList.add('hide');
         }
       }
    }

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

How to add a class in a method - VUE.js

methods

class

click

vue.js