Vue2如何使用$refs定位一个元素并移除css class

Vue2 how to use $refs to target an element and remove css class

我想在调用方法时删除元素的 css class。 但我想使用 $refs.

来做到这一点

模板:

  <div class="modal"  ref="myModal"></div>

方法:

      closeDropdown: function() {
            this.$refs.myModal.$el.removeClass("open");
      }
this.$refs.myModal.classList.remove("open");

两步:

  1. const modalElement = this.$refs.myModal; // reference to the DOM element
  2. modalElement.classList.toggle("custom"); // use classList API of DOM element

classList API 参考:https://developer.mozilla.org/en-US/docs/Web/API/Element/classList,你可以使用这个 API 来修改它的 类 使用 add(), remove(), replace() 和 toggle() 方法。

你也可以参考这个CodeSandbox Vuejs的例子:https://codesandbox.io/s/nervous-wood-s3nhq?file=/src/App.vue:269-481