Bagaimana untuk mendapatkan elemen dom dalam vue

Dalam Vue, terdapat tiga cara untuk mendapatkan elemen DOM: 1. Gunakan atribut ref untuk menentukan pembolehubah rujukan untuk elemen dan aksesnya melalui ini.$refs 2. Gunakan terus elemen punca komponen ini.$ el; 3. Gunakan kaedah querySelector Query pada elemen terikat. . elemen /kod> atribut dan tentukan nama pembolehubah rujukan.

Dalam contoh Vue, anda boleh menggunakan objek this.$refs untuk mengakses elemen dengan atribut 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. Atribut $el

$el menghala ke elemen akar komponen semasa.

<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

• ref 属性，并指定一个引用变量名。
• 在 Vue 实例中，可以使用 this.$refs 对象访问带有 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. $el 属性

• $el 属性指向当前组件的根元素。

rrreee

3. querySelector

• 使用 Vue 实例绑定的元素上调用 querySelectorPanggil kaedah querySelector pada elemen yang terikat pada contoh Vue.

rrreee

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan elemen dom dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!