在Vue 中，取得DOM 元素有三種方法：1. 使用ref 屬性為元素指定引用變量，並透過this.$refs 存取；2. 直接使用元件的根元素this.$el；3 . 使用querySelector 方法在綁定元素上查詢。
在Vue 中取得DOM 元素
在Vue 應用程式中，可以透過以下方法取得DOM 元素：
1. ref 屬性
ref 屬性，並指定一個引用變數名稱。 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
querySelector 方法。 <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>以上是vue中怎麼取得dom元素的詳細內容。更多資訊請關注PHP中文網其他相關文章！
