vue 3.0 使用ref获取dom元素

前言

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

2022.10.22 更新

鉴于较多人询问几个高频问题，在此做统一回复

ref.value获取到的是null
答：检查是否将ref变量return出去了
答：检查是在哪里进行的console.log，setup函数相当于vue2中的beforeCreate, created阶段，如果直接在setup中直接使用console.log获取ref，返回的自然是null
ref.value获取到的数据怎么使用
答：在函数、生命周期里，例: myRef.value.className
获取多个dom，push重复数据
答：检查setup函数执行了几次

最后，希望在提出疑问前请创建一个新项目，将文章中的示例代码完完整整的拷贝到新项目的app.vue中，运行后可直接查看效果。

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]data数据属性及ref获取dom
data项的定义 this.$refs获取dom 获取不到数据这样中转下才ok 小结: data里不能用this.$ref. 另外使用visjs时候 view-source:http://visjs ...
Vue3--ref使用（解决ref无法获取dom元素的问题）
众所周知在vue2中,ref主要的作用还是便于快速的获取dom元素或组件,因为ref操作相比document.getElementbyId会减少dom操作的节点消耗. 具体关于vue2中ref和$re ...
ref 引用(vue获取DOM元素）
ref 引用 jquery 牛逼简化了程序员操作DOM的过程 vue 优势: MVVM 在 vue 中,程序员不需要操作DOM.只需要把数据维护好!(数据驱动视图) 结论:在 vue 项目,强烈不建 ...
vue中动态获取dom元素进行操作
这几天我远程面试了一家公司,期间问题我都回答上来了但有一个问题我很纳闷就是你说下vue中获取dom元素的方法吧我说大体上俩中吧 1.vue中 ref的方法给元素起一个ref名称通过 th ...
vue 获取dom子元素_vue获取dom元素注意事项
mounted(){ setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.l ...
vue获取dom元素注意问题
mounted(){setTimeout(()=>{this.contentToggle();},1000)},methods:{contentToggle(){console.log(this ...
vue 获取id元素,vue.js怎么获取dom元素？
vue.js怎么获取dom元素?下面本篇文章给大家介绍一下vue.js获取dom元素的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 使用Vue.js获取dom元素标签中添加 ...
vue如何获取div的宽度_vue获取dom元素高度的方法
获取DOM高度: 要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作(参照生命周期钩子mounted语法:https://cn.vuejs.org/v2/api/#mo ...
Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...

vue 3.0 使用ref获取dom元素

vue 3.0 使用ref获取dom元素相关推荐

最新文章

热门文章