vue 3.0 使用ref获取dom元素的示例
作者：好巧.
这篇文章主要介绍了vue 3.0 使用ref获取dom元素,包括vue2.x获取dom和vue3.0获取单个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元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！