vue에서 dom에 클래스 이름이 있는지 확인하는 방법(두 가지 방법)-프런트엔드 Q&A-php.cn

vue에서 dom에 클래스 이름이 있는지 확인하는 방법(두 가지 방법)

PHPz

풀어 주다： 2023-04-13 11:00:14

원래의

695명이 탐색했습니다.

Vue에서는 DOM에 특정 클래스 이름이 있는지 확인하는 것이 일반적인 요구 사항입니다. 이 기능을 구현하기 위한 두 가지 방법이 아래에 소개됩니다.

방법 1: $refs 사용

Vue에서는 $refs 속성을 사용하여 구성 요소의 요소에 대한 참조를 가져올 수 있습니다. 그런 다음 기본 JavaScript 메서드 classList.includes()를 사용하여 DOM 요소에 특정 클래스 이름이 있는지 확인할 수 있습니다. 다음은 샘플 코드입니다. $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和$elrrreee

방법 2: $el🎜🎜 사용또 다른 방법은 구성 요소의 $el 속성을 사용하여 구성 요소의 DOM 요소를 가져오는 것입니다. 다음은 샘플 코드입니다. 🎜rrreee🎜Summary🎜🎜 $refs 및 $el를 통해 Vue에서 DOM에 특정 클래스 이름이 있는지 쉽게 확인할 수 있습니다. 위의 두 가지 방법 모두 이 기능을 달성할 수 있으며 실제 필요에 따라 선택한 특정 방법을 결정할 수 있습니다. 🎜

위 내용은 vue에서 dom에 클래스 이름이 있는지 확인하는 방법(두 가지 방법)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!