vueでdomにクラス名があるかどうかを確認する方法（2つの方法）-フロントエンドQ&A-php.cn

vueでdomにクラス名があるかどうかを確認する方法（2つの方法）

PHPz

リリース： 2023-04-13 11:00:14

オリジナル

695 人が閲覧しました

Vue では、DOM に特定のクラス名があるかどうかを確認するのが一般的な要件です。この機能を実現するための 2 つの方法を以下に紹介します。

方法 1: $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>

ログイン後にコピー

方法 2: $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>

ログイン後にコピー

summary

DOM に特定の値があるかどうかは、$refs と $el# を使用して Vue で簡単に確認できます。＃＃クラス名。上記の両方の方法でこの機能を実現できますが、どの方法を選択するかは実際のニーズに応じて決定できます。

以上がvueでdomにクラス名があるかどうかを確認する方法（2つの方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。