How to check if dom has a class name in vue (two methods)

In Vue, it is a common requirement to check whether the DOM has a certain class name. Two methods are introduced below to implement this function.

Method 1: Using $refs

In Vue, you can use the $refs attribute to get a reference to an element in the component. You can then use the native JavaScript method classList.includes() to determine whether the DOM element has a certain class name. Here is a sample code:

<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>

Method 2: Using $el

Another method is to use the $el property of the component to get the DOM element of the component. The following is a sample code:

<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>

Summary

You can easily check whether the DOM has a certain value in Vue through $refs and $el Class name. Both of the above methods can achieve this function, and the specific method chosen can be determined according to actual needs.

The above is the detailed content of How to check if dom has a class name in vue (two methods). For more information, please follow other related articles on the PHP Chinese website!