Comment obtenir le contenu du CSSID dans Vue

Avec le développement continu des applications Web, la technologie front-end devient de plus en plus mature. Le framework Vue, en particulier, permet aux développeurs de créer des applications Web plus efficacement. Pendant le processus de développement de Vue, vous avez parfois besoin d'obtenir l'ID CSS d'un certain élément pour effectuer certaines opérations. Ce processus peut être déroutant pour certains développeurs. Cet article explique comment obtenir le contenu de l'ID CSS dans Vue.

1. Utilisez $refs pour obtenir des éléments

Dans Vue, vous pouvez utiliser $refs pour obtenir des références à des composants ou des éléments. Chaque composant Vue possède son propre objet $refs, accessible en définissant l'attribut ref sur l'élément dans le modèle. Voici un exemple :

<template>
  <div>
    <button ref="myButton" @click="doSomething">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      const button = this.$refs.myButton;
      console.log(button.id); // 输出元素的ID
    },
  },
};
</script>

Dans le code ci-dessus, nous pouvons voir que l'élément a une valeur d'attribut ref de "myButton", et nous pouvons ensuite utiliser this.$refs.myButton pour obtenir la référence du element, puis accédez à son attribut id.

2. Utilisez la méthode document.getElementById()

Une autre façon d'obtenir le contenu de l'ID CSS consiste à utiliser la méthode JavaScript native document.getElementById(). Cette méthode recherche des éléments dans l'ensemble du document et renvoie le premier élément correspondant. Voici un exemple :

<template>
  <div>
    <button id="myButton" @click="doSomething">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      const button = document.getElementById('myButton');
      console.log(button.id); // 输出元素的ID
    },
  },
};
</script>

Dans le code ci-dessus, nous pouvons voir que l'élément

a un attribut id comme "myButton", puis nous pouvons utiliser document.getElementById('myButton') pour obtenir la référence de l'élément, puis accédez à son attribut id.

3. Utilisez l'attribut $el dans Vue

En plus des méthodes $refs et document.getElementById(), Vue fournit également un attribut $el pour obtenir l'élément racine du composant actuel. Dans un composant Vue, vous pouvez utiliser this.$el pour obtenir l'élément racine du composant actuel. Voici un exemple :

<template>
  <div id="myComponent">
    <button id="myButton" @click="doSomething">Click me</button>
  </div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      const component = this.$el;
      const button = component.querySelector('#myButton');
      console.log(button.id); // 输出元素的ID
    },
  },
};
</script>

Dans le code ci-dessus, nous pouvons voir que l'élément racine du composant a un attribut id comme "myComponent", alors nous pouvons utiliser this.$el pour obtenir la référence de l'élément racine, et puis transmettez le composant La méthode .querySelector('#myButton') obtient une référence à l'élément enfant

et accède enfin à son attribut id.

Conclusion

En bref, Vue propose plusieurs méthodes pour obtenir le contenu de l'ID CSS. Les développeurs peuvent choisir la méthode appropriée en fonction des besoins réels. Quoi qu'il en soit, ils permettent aux développeurs de développer des applications Vue plus efficacement.

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!