在Vue中，檢視DOM是否有某個類別名稱是常見的需求。下面介紹兩種方法來實作這個功能。
方法一：使用$refs
在Vue中，可以使用$refs屬性來取得元件中某個元素的參考。然後可以使用原生JavaScript方法classList.includes()來判斷DOM元素是否有某個類別名稱。下面是一個範例程式碼：
<template>
<div ref="myDiv" class="my-class"></div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$refs.myDiv; //获取myDiv元素的引用
if (myDiv.classList.includes('my-class')) { //判断是否有my-class类名
console.log('myDiv has the class "my-class"');
} else {
console.log('myDiv does not have the class "my-class"');
}
}
};
</script>方法二：使用$el
另一種方法是使用元件的$el屬性來取得元件的DOM元素。以下是一個範例程式碼：
<template>
<div class="my-class"></div>
</template>
<script>
export default {
mounted() {
const myDiv = this.$el; //获取组件的DOM元素
if (myDiv.classList.includes('my-class')) { //判断是否有my-class类名
console.log('the component has the class "my-class"');
} else {
console.log('the component does not have the class "my-class"');
}
}
};
</script>總結
透過$refs和$el可以輕鬆地在Vue中查看DOM是否有某個類名。以上兩種方法都可以實現這個功能，具體選擇哪一種方法可以根據實際需求來定。
以上是vue怎麼看dom有沒有類別名稱（兩種方法）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
