vue3中使用ref获取dom的操作代码
更新时间：2024年06月27日 08:28:38 作者：扯蛋蛋
ref在我们开发项目当中很重要的,在 Vue 中使用 ref 可以提高代码的可读性和维护性,因为它直接标识出了组件中需要操作的具体元素或组件实例,本文我将给大家带来的是vue3中用ref获取dom的操作,文中有相关的代码示例供大家参考,需要的朋友可以参考下
前言
本期文章我将给大家带来的是vue3中用ref获取dom的操作，ref在我们开发项目当中很重要的，在 Vue 中使用 ref 可以提高代码的可读性和维护性，因为它直接标识出了组件中需要操作的具体元素或组件实例。这使得团队合作、代码审查和后续功能更新更加高效。总结来说，ref 在 Vue 中是一个非常有用的工具，不仅使得操作 DOM 更加方便和直观，还能够提升组件间通信的灵活性和效率。正确使用 ref 可以帮助开发者更好地管理和操作 DOM 元素以及组件实例，从而实现复杂的前端交互和 UI 动效。接下来我就一一道来吧
通过ref直接拿到dom引用
<template>
<div class="demo1-container">
<div ref="sectionRef" class="ref-section">1111111</div>
</div>
</template>
<script setup lang="ts">
import {onMounted, ref} from 'vue'
const sectionRef = ref(null)
onMounted(() => {
console.log(sectionRef.value)
})
</script>
在这里我们要注意的是当在div标签中用 ref="sectionRef"，之后在声明响应式变量的时候，要用sectionRef命名，这个是一定要的，然后我们通过 sectionRef.value 的形式即可获取该div元素。 让我们看看结果吧
单一dom元素或者个数较少的场景
通过父容器的ref遍历拿到dom引用
<template>
<div class="demo2-container">
<div ref="listRef" class="list-section">
<div @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
<span>{{item}}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
const listRef = ref()
const state = reactive({
list: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
})
onMounted(()=>{
console.log(listRef.value)
})
</script>
<style scoped>
.demo2-container {
width: 200px;
height: 400px;
border: 1px solid #000;
overflow: auto;
}
</style>
通过对父元素添加了ref属性，并声明了一个与ref属性名称相同的变量listRef，此时通过listRef.value会获得包含子元素的dom对象,然后我们就可以此时通过listRef.value.children[index]的形式获取子元素dom
通过:ref将dom引用放到数组中
<template>
<div class="demo2-container">
<div class="list-section">
<div :ref="setRefAction" @click="higherAction(index)" class="list-item" v-for="(item, index) in state.list" :key="index">
<span>{{item}}</span>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { onMounted, reactive ,ref} from 'vue'
const state = reactive({
list: [1, 2, 3, 4, 5, 6, 7],
refList: []
})
const index = ref(null)
const setRefAction = (el: any) => {
state.refList.push(el);
}
const higherAction = (index) => {
console.log(state.refList[index])
}
onMounted( () => {
console.log(state.refList);
setRefAction(index)
})
</script>
<style scoped>
.demo2-container {
width: 200px;
height: 400px;
border: 1px solid #000;
overflow: auto;
}
.list-item {
background-color: pink;
border: 1px solid #000;
}
</style>
这种情况下，我们可以通过动态设置ref的形式进行设置ref，这样我们就可以获取到一个ref的数组，结果如下
当我们点击哪个就会获取哪个的dom，这样我们简单多了
到此这篇关于vue3中使用ref获取dom的操作代码的文章就介绍到这了,更多相关vue3 ref获取dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Vite配置优雅的code spliiting代码分割详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要为大家详细介绍了vue使用highcharts自定义仪表盘图表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了Element PageHeader页头的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了Vue filter 过滤当前时间 实现实时更新效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-12-12
这篇文章主要和大家一起聊一聊Vue.js过渡效果、CSS 过渡效果、纯 JavaScript过渡效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
Vue开发模式是一种基于Vue.js框架的开发方式,它可以帮助开发者更高效地构建和维护复杂的Web应用程序,下面这篇文章主要给大家介绍了关于vue关闭开发模式提示的简单解决办法,需要的朋友可以参考下2024-04-04
这篇文章主要介绍了vue3中使用sse最佳实践,封装工具,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要为大家详细介绍了vue-dialog的弹出层组件，可以通过npm引用的组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
这篇文章主要为大家介绍了Vue2 cube-ui时间选择器，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
本篇文章主要介绍了Vuex 模块化(module)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论