vue 3.0 使用ref获取dom元素的示例

前言

附上vue3.0文档：Vue3中文文档 - vuejs

Vue 2.x获取DOM

<div ref="myRef"></div>
this.$refs.myRef

Vue 3.0获取单个DOM

<template>
  <div ref="myRef">获取单个DOM元素</div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myRef = ref(null);

    onMounted(() => {
      console.dir(myRef.value);
    });

    return {
      myRef
    };
  }
};
</script>

Vue 3.0获取多个DOM(一般用于获取数组)

<template>
  <div>获取多个DOM元素</div>
  <ul>
    <li v-for="(item, index) in arr" :key="index" :ref="setRef">
      {{ item }}
    </li>
  </ul>
</template>

<script>
import { ref, nextTick } from 'vue';

export default {
  setup() {
    const arr = ref([1, 2, 3]);

    // 存储dom数组
    const myRef = ref([]);

    const setRef = (el) => {
      myRef.value.push(el);
    };

    nextTick(() => {
      console.dir(myRef.value);
    });

    return {
      arr,
      setRef
    };
  }
};
</script>

注：console.dir()可以显示一个对象所有的属性和方法

效果图：

如果本篇文章对你有帮助的话，很高兴能够帮助上你。

当然，如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方，希望你在看到之后能够在评论里指出来，我会在看到之后尽快的回复你。

到此这篇关于vue 3.0 使用ref获取dom元素的文章就介绍到这了,更多相关vue ref获取dom元素内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue 2.0学习笔记之使用$refs访问Vue中的DOM

    通过前面对Vue的学习,到现在我们很有必要进一步了解Vue实例中的一些特殊的属性和方法.首先要了解的是$refs属性.但是在深入到JavaScript部分之前,我们先看看模板. <div id="app"> <h1>{{ message }}</h1> <button @click="clickedButton">点击偶</button> </div> let app = new Vue({ e

  • vue中使用refs定位dom出现undefined的解决方法

    之前在公司做项目,一直感觉用ref来定位dom节点挺方便的.但是期间遇到了一个问题,就是在mounted(){}钩子里面使用this.$refs.xxx,打印出来的却是undefined? 于是我就对比了一下之前使用ref定位的.vue文件,发现了他们之间的区别. 我们要想知道为什么会定位不到某个DOM节点,我们首先要理解mounted(){}这个钩子函数是用来做什么的. 下面是vue官方给出的vue生命周期(部分),正如官方所说的一样,一开始不必先理解,不过随这你的学习与使用,他的参考价值会越

  • Vue中的ref作用详解(实现DOM的联动操作)

    Vue中的ref作用详解(实现DOM的联动操作)

    其实官网已经讲的很仔细了,只是我个人可能接受能力比较差,并没有立刻明白他的意思.不过使用之后就很明白了.这里主要举个例子来说明: 我想要的效果是点击保存的同时,也能点击重置这个按钮,触发reset,ref这个特性就帮我达到了DOM的一个联动效果. 总结

  • Vue 解决通过this.$refs来获取DOM或者组件报错问题

    1.关于this.$refs的使用场景 如果ref属性加在普通元素上,那么this.$refs.name则指向该DOM元素 <p ref="p">hello</p> <!-- this.$refs.p 指向该DOM元素 --> 如果ref属性加在组件上,那么this.$refs.name指向该组件实例 <child-component ref="child"></child-component> <!

  • vue 3.0 使用ref获取dom元素的示例

    vue 3.0 使用ref获取dom元素的示例

    前言 附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr

  • 详解在Vue中通过自定义指令获取dom元素

    vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定

  • vue获取dom元素注意事项

    mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高,一般情况下我们都可以想到写在mounted函数里,即dom加载完再获取,但是结果并不如我们所想,又想到用一个 this.$nextTick(()=>{ //函数 }) 来获取,发现根本没用啊

  • Vue3通过ref操作Dom元素及hooks的使用方法

    Vue3 ref获取DOM元素 <div ref="divBox">Hello</div> import {ref,onMounted} from 'vue' setup() { const divBox = ref(null); onMounted(()=>{ console.log(divBox.value); }) return{divBox} } 父组件监听子组件中的元素 在父组件中的子组件里会打印一个proxy(实例),通过实例去获取里面的属性或

  • 基于vue1和vue2获取dom元素的方法

    vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box'  v-el: myBox>你好</div> 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本中 在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素 例如:<div class='box' ref='myBox'>你好

  • 解决vue项目获取dom元素宽高总是不准确问题

    dom元素内部内容是动态的,重置数据后直接获取宽高总是不准确: this.$refs.editor[0].offsetHeight; 原因:重置数据后获取dom元素宽高时,dom元素还未渲染完毕: 解决方法:利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调 补充知识:vue 获取 指定元素的高度宽度等(

  • 如何在Vue中获取DOM元素的实际宽高

    如何在Vue中获取DOM元素的实际宽高

    目录 前言 一.获取元素 二.获取元素宽高 补充:vue项目获取dom元素宽高总是不准确 总结 前言 最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以使用 ref 来获取一个真实的 DOM 元素. 为了保险起见,所有的 DOM 操作建议都放在 $nextTick() 方法中. <template> <div class="box

  • vue获取DOM元素并设置属性的两种实现方法

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相应的元素加ref="name" 然后再this.$refs.name获取到该元素 注意:在获取相应元素之前,必须在mount钩子进行挂载,否则获取到的值为空, 如果是给子组件加id并修改自定义属性,则直接会加载改子组件对应的外层div上,并不会改变该子组件原本的自定义属性的值 如果给子组件

  • Vue获取DOM元素并修改属性的方法

    Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式 使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(

  • vue 动态组件(component :is) 和 dom元素限制(is)用法说明

    一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog

随机推荐