Vue中如何获取dom元素？

在Vue中获取DOM元素有多种方法，以下是其中的几种示例：

1. 通过ref属性获取

可以在模板中使用ref属性为DOM元素命名，然后在组件实例中使用$refs属性来访问该元素。示例如下：

<template>
  <div>
    <div ref="myDiv">Hello Worlddiv>
  div>
template>
 
<script>
export default {
  mounted() {
    console.log(this.$refs.myDiv); // 获取到myDiv元素
  }
}
script>

1. 通过$el属性获取

可以在组件实例中使用$el属性来访问该组件的DOM元素。示例如下：

<template>
  <div>Hello Worlddiv>
template>
 
<script>
export default {
  mounted() {
    console.log(this.$el); // 获取到组件的根元素
  }
}
script>

1. 通过事件对象获取

可以在事件处理函数中通过事件对象的target属性来访问触发事件的DOM元素。示例如下：

<template>
  <div>
    <button @click="handleClick">点击button>
  div>
template>
 
<script>
export default {
  methods: {
    handleClick(event) {
      console.log(event.target); // 获取到触发事件的按钮元素
    }
  }
}
script>