Maison  >  Article  >  interface Web  >  Comment obtenir des éléments dom en vue

Comment obtenir des éléments dom en vue

下次还敢
下次还敢original
2024-04-30 04:09:15557parcourir

Dans Vue, il existe trois façons d'obtenir des éléments DOM : 1. Utilisez l'attribut ref pour spécifier une variable de référence pour l'élément et y accéder via this.$refs; 2. Utilisez directement l'élément racine du composant this.$ el; 3. Utilisez la méthode querySelector Query sur l'élément lié.

Comment obtenir des éléments dom en vue

Obtenir des éléments DOM dans Vue

Dans les applications Vue, vous pouvez obtenir des éléments DOM via les méthodes suivantes :

1. Attribut ref

  • Ajouter ref et spécifiez un nom de variable de référence. <code>ref 属性,并指定一个引用变量名。
  • 在 Vue 实例中,可以使用 this.$refs 对象访问带有 ref 属性的元素。
<code class="vue"><template>
  <div ref="myDiv"></div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)  // 声明一个空引用变量
    return { myDiv }
  },
  mounted() {
    console.log(this.$refs.myDiv)  // myDiv 元素
  }
}
</script></code>

2. $el 属性

  • $el 属性指向当前组件的根元素。
<code class="vue"><template>
  <div></div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myDiv = ref(null)  // 声明一个空引用变量
    return { myDiv }
  },
  mounted() {
    console.log(this.$el)  // 组件的根元素
  }
}
</script></code>

3. querySelector

  • 使用 Vue 实例绑定的元素上调用 querySelector
  • Dans une instance Vue, vous pouvez utiliser l'objet this.$refs pour accéder aux éléments avec l'attribut ref.
🎜
<code class="vue"><template>
  <div></div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 绑定一个空引用变量
    const myDiv = ref(null)
    return { myDiv }
  },
  mounted() {
    this.myDiv.value = this.$el.querySelector('div')
  }
}
</script></code>
🎜🎜2. L'attribut $el🎜🎜🎜🎜$el pointe vers l'élément racine du composant actuel. 🎜🎜rrreee🎜🎜3. querySelector🎜🎜🎜🎜Appelez la méthode querySelector sur l'élément lié à l'instance Vue. 🎜🎜rrreee

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn