Comment vérifier si dom a un nom de classe dans vue (deux méthodes)-Questions et réponses frontales-php.cn

Comment vérifier si dom a un nom de classe dans vue (deux méthodes)

PHPz

Libérer： 2023-04-13 11:00:14

original

694 Les gens l'ont consulté

Dans Vue, il est courant de vérifier si le DOM a un certain nom de classe. Deux méthodes sont présentées ci-dessous pour implémenter cette fonction.

Méthode 1 : utiliser $refs

Dans Vue, vous pouvez utiliser l'attribut $refs pour obtenir une référence à un élément du composant. Vous pouvez ensuite utiliser la méthode JavaScript native classList.includes() pour déterminer si l'élément DOM a un certain nom de classe. Voici un exemple de code : $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>

Copier après la connexion

方法二：使用$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>

Copier après la connexion

总结

通过$refs和$elrrreee

Méthode 2 : Utiliser $el🎜🎜Une autre méthode consiste à utiliser l'attribut $el du composant pour obtenir l'élément DOM du composant. Voici un exemple de code : 🎜rrreee🎜Résumé🎜🎜Vous pouvez facilement vérifier si le DOM a un certain nom de classe dans Vue via $refs et $el. Les deux méthodes ci-dessus peuvent remplir cette fonction et la méthode spécifique choisie peut être déterminée en fonction des besoins réels. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!