Comment obtenir des attributs personnalisés dans vue

Dans Vue, nous pouvons lier des attributs personnalisés aux éléments via la directive v-bind, puis obtenir ces attributs personnalisés via JavaScript. Apprenons étape par étape comment obtenir des attributs personnalisés.

1. Lier des attributs personnalisés aux éléments

La commande v-bind nous permet de lier dynamiquement des attributs aux éléments, sous la forme : v-bind : nom d'attribut="expression", ou en abrégé : nom d'attribut ="expression" .

Nous pouvons lier un attribut personnalisé data-id à l'élément comme ceci :

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

où userId est une variable définie dans les données du composant.

2. Obtenir des attributs personnalisés

Nous pouvons obtenir cet attribut personnalisé via JavaScript. Dans Vue, nous pouvons obtenir les attributs personnalisés de l'élément pendant le cycle de vie de Mounted(). Le cycle de vie Mounted() est une fonction hook déclenchée après le montage de l'instance Vue sur le DOM. À ce stade, le DOM peut être manipulé.

Supposons que nous ayons lié l'attribut data-id à l'élément p dans le composant précédent, nous pouvons alors obtenir l'attribut comme ceci :

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

Dans l'exemple ci-dessus, nous avons lié l'attribut personnalisé data- à l'élément p. id, et a donné à l'élément p une référence nommée "Utilisateur" via l'attribut ref. Dans la fonction Mounted(), nous obtenons l'élément p via this.$refs.user et appelons la méthode getAttribute('data-id') dessus pour obtenir l'attribut personnalisé. Enfin, nous imprimons la valeur obtenue et le résultat est 123456.

3. Utilisation d'attributs personnalisés

Après avoir obtenu les attributs personnalisés, nous pouvons effectuer certaines opérations correspondantes. Par exemple, lorsque nous cliquons sur l'élément p, la valeur de l'attribut personnalisé de l'élément apparaît :

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

Ce qui précède explique comment obtenir l'attribut personnalisé dans Vue. Liez les propriétés personnalisées via la directive v-bind, puis obtenez ces propriétés personnalisées via JavaScript. Enfin, vous pouvez utiliser ces propriétés si vous avez besoin d'étendre les fonctionnalités de Vue.

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!