当先锋百科网

首页 1 2 3 4 5 6 7

获取DOM元素在Vue中非常简单,可以使用以下两种方式:

vue怎么获取dom元素

1. 使用$refs


<template>
  <div ref="myDiv">我是一段DOM元素</div>
</template>
<script>
export default {
  mounted() {
    const myDiv = this.$refs.myDiv;
    console.log(myDiv);
  },
};
</script>

在mounted钩子函数中,可以通过this.$refs来访问定义在模板中的ref属性,这里的myDiv就是一个DOM元素,可以直接操作它。

2. 使用原生DOM API


<template>
  <div id="myDiv">我是一段DOM元素</div>
</template>
<script>
export default {
  mounted() {
    const myDiv = document.getElementById('myDiv');
    console.log(myDiv);
  },
};
</script>

Vue组件实际上是基于原生DOM API来实现的,所以我们也可以像普通的Web开发一样使用原生API来获取DOM元素,这里的myDiv就是一个DOM元素,可以直接操作它。