Vueでカスタム属性を取得する方法

Vue では、v-bind ディレクティブを通じてカスタム属性を要素にバインドし、JavaScript を通じてこれらのカスタム属性を取得できます。カスタム属性を取得する方法を段階的に学習してみましょう。

1. カスタム属性を要素にバインドする

v-bind ディレクティブを使用すると、次の形式で属性を要素に動的にバインドできます。 v-bind: 属性名 ="式" 、または属性名 = "式" と省略されます。

カスタム属性 data-id を次のように要素にバインドできます:

<template>
  <div>
    <p v-bind:data-id="userId">User ID</p>
  </div>
</template>

このうち、userId はコンポーネントのデータ内で定義される変数です。

2. カスタム属性の取得

このカスタム属性は JavaScript を通じて取得できます。 Vue では、mounted() ライフサイクル中に要素のカスタム属性を取得できます。 Mounted() ライフサイクルは、Vue インスタンスが DOM にマウントされた後にトリガーされるフック関数であり、この時点で DOM を操作できます。

data-id 属性を前のコンポーネントの p 要素にバインドしたとすると、次のように属性を取得できます。

<template>
  <div>
    <p v-bind:data-id="userId" ref="user">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  mounted() {
    const userEle = this.$refs.user;  //获取p元素
    const userId = userEle.getAttribute('data-id');  //获取自定义属性
    console.log(userId);  //打印出123456
  }
}
</script>

上の例では、p 要素をバインドします。カスタム属性 data-id がバインドされ、「User」という名前の参照が ref 属性を通じて p 要素に与えられます。 mount() 関数では、this.$refs.user を通じて p 要素を取得し、その要素に対して getAttribute('data-id') メソッドを呼び出してカスタム属性を取得します。最後に、取得した値を出力します。結果は 123456 です。

3. カスタム属性の使用

カスタム属性を取得した後、対応する操作をいくつか実行できます。たとえば、p 要素をクリックすると、要素のカスタム属性の値がポップアップ表示されます。

<template>
  <div>
    <p v-bind:data-id="userId" ref="user" @click="showId">User ID</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userId: '123456'
    }
  },
  methods: {
    showId() {
      const userEle = this.$refs.user;  //获取p元素
      const userId = userEle.getAttribute('data-id');  //获取自定义属性
      alert(userId);  //弹出该元素自定义属性的值
    }
  }
}
</script>

上記は、Vue でカスタム属性を取得する方法です。 v-bind ディレクティブを通じてカスタム プロパティをバインドし、JavaScript を通じてこれらのカスタム プロパティを取得します。最後に、Vue の機能を拡張する必要がある場合にこれらのプロパティを使用できます。

以上がVueでカスタム属性を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。