在web開發(fā)中，有時(shí)我們需要操作DOM元素來實(shí)現(xiàn)一些交互效果，例如添加、刪除class等。在vue中，可以通過v-bind:class或:class來動(dòng)態(tài)綁定class，但在某些情況下，可能需要手動(dòng)刪除DOM元素上的某個(gè)class，那么我們該如何實(shí)現(xiàn)呢？

// 獲取DOM元素
 let element = document.getElementById('el')
 // 刪除某個(gè)class
 element.classList.remove('class-name')

以上代碼實(shí)現(xiàn)了通過getElementById獲取DOM元素對象，通過classList.remove()方法刪除element元素上的class-name樣式名。不過，在vue中，推薦使用refs來獲取元素對象，refs是vue中引用的一個(gè)API，可以用來觸發(fā)子組件或子元素的方法或?qū)傩浴?/p>

// html代碼中給元素添加ref屬性
// vue實(shí)例代碼中獲取元素
 mounted() {
let element = this.$refs.el
element.classList.remove('class-name')
 }

通過給元素添加ref屬性，可以在vue實(shí)例中通過this.$refs.el來獲取元素對象，從而實(shí)現(xiàn)刪除元素上的某個(gè)class。當(dāng)然，以上代碼還可以進(jìn)一步封裝成一個(gè)指令來使用：

// 注冊指令
Vue.directive('removeClass', {
inserted: function (el, binding) {
el.classList.remove(binding.value)
}
})
// 使用指令

通過Vue.directive來注冊一個(gè)名為removeClass的指令，并在inserted鉤子函數(shù)中實(shí)現(xiàn)了刪除元素上某個(gè)class的功能。使用時(shí)，在元素上使用v-remove-class="'class-name'"即可。以上三種方法，都可以實(shí)現(xiàn)刪除DOM元素上的某個(gè)class，可以根據(jù)自己的需求選擇最合適的方式。