前言
附上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元素内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！