vue中怎麼取得dom元素

在Vue 中，取得DOM 元素有三種方法：1. 使用ref 屬性為元素指定引用變量，並透過this.$refs 存取；2. 直接使用元件的根元素this.$el；3 . 使用querySelector 方法在綁定元素上查詢。

在Vue 中取得DOM 元素

在Vue 應用程式中，可以透過以下方法取得DOM 元素：

1. ref 屬性

• 為元件或元素新增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 方法。

<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中文網其他相關文章！