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");
两步:
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
我想在调用方法时删除元素的 css class。 但我想使用 $refs.
来做到这一点模板:
<div class="modal" ref="myModal"></div>
方法:
closeDropdown: function() {
this.$refs.myModal.$el.removeClass("open");
}
this.$refs.myModal.classList.remove("open");
两步:
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