vue中怎麼取得dom

在Vue.js 中，可透過四種方式取得DOM 元素：使用ref 為元件或DOM 元素建立參考；透過querySelector 依據CSS 選擇器取得DOM 元素；透過getBoundingClientRect 取得DOM 元素邊界矩形資訊；透過event.target 在事件發生時取得觸發事件的DOM 元素。

Vue 中取得DOM

#在Vue.js 中，取得DOM 元素有幾種方法，具體取決於實際需要。

1. 透過 ref

ref 屬性為元件或 DOM 元素建立一個參考。在元件中，可以使用 this.$refs 存取引用。對於 DOM 元素，可以使用 $refs 存取 DOM 節點。

<code class="javascript">// 组件中
<template>
    <div ref="myDiv"></div>
</template>
<script>
export default {
    mounted() {
        console.log(this.$refs.myDiv); // 获取 myDiv DOM 节点
    }
}
</script>

// DOM 元素
<div ref="myDiv"></div>
<script>
console.log(document.myDiv); // 获取 myDiv DOM 节点
</script></code>

2. 透過 querySelector

#querySelector 方法可以根據 CSS 選擇器取得 DOM 元素。

<code class="javascript">// 组件中
const myDiv = this.$el.querySelector('div');

// DOM 元素
const myDiv = document.querySelector('div');</code>

3. 透過 getBoundingClientRect

getBoundingClientRect 方法傳回一個包含 DOM 元素邊界矩形資訊的 DOMRect 物件。

<code class="javascript">// 组件中
const rect = this.$el.getBoundingClientRect();

// DOM 元素
const rect = document.myDiv.getBoundingClientRect();</code>

4. 透過 event.target

當事件發生時，event.target 屬性包含觸發事件的 DOM 元素。

<code class="javascript">// 在事件处理函数中
const target = event.target;</code>

根據具體情況，可以根據上述方法選擇最合適的方法來取得 DOM 元素。

以上是vue中怎麼取得dom的詳細內容。更多資訊請關注PHP中文網其他相關文章！