vue怎麼看dom有沒有類別名稱（兩種方法）

在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中文網其他相關文章！