vue3获取dom获取焦点

最新推荐文章于 2024-06-26 20:30:00 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-06-26 20:30:00 发布

阅读量2k

点赞数 1

分类专栏： vue vue3 文章标签： vue.js

本文链接：https://blog.csdn.net/Guoyu1_/article/details/120095432

版权

vue 同时被 2 个专栏收录

95 篇文章 0 订阅

订阅专栏

18 篇文章 1 订阅

订阅专栏

本文详细介绍了在Vue2和Vue3中如何获取单个DOM元素的方法，包括使用$refs在Vue2中操作DOM，并展示了如何在Vue3中处理循环列表中的DOM元素。还涉及了Vue3的ref和nextTick用法。

摘要由CSDN通过智能技术生成

<div ref=“Ref”>获取单个DOM元素</div>
Vue 2获取DOM： this.$refs.Ref
Vue 3获取单DOM：

<script>
  import { ref, onMounted } from "vue";
export default {
setup() {
const Ref = ref(null);
onMounted(() => {
console.dir(Ref.value); /  Ref.value.focus() //获取焦点

  });
    return { Ref };
}
};
</script>

Vue 3获取循环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 Ref = ref([]);
const setRef = (el) => {
Ref.value.push(el);
};
nextTick(() => {
console.dir(Ref.value);
});
return {arr, setRef };
}
};
</script>