Vue2 如何使用 $refs 定位元素并删除 css 类

Posted 2023-02-16

【中文标题】Vue2 如何使用 $refs 定位元素并删除 css 类

【英文标题】：Vue2 how to use $refs to target an element and remove css class

【发布时间】：2022-01-11 16:59:35

【问题描述】：

我想在调用方法时删除元素的 css 类。 但我想使用 $refs 来做到这一点。

模板：

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

方法：

      closeDropdown: function() 
            this.$refs.myModal.$el.removeClass("open");
      

【参考方案1】：

两步：

const modalElement = this.$refs.myModal; // reference to the DOM element 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

【参考方案2】：

this.$refs.myModal.classList.remove("open");