Vue3获取和操作DOM元素的项目实践
更新时间：2023年08月10日 10:17:21 作者：键指江湖
在Vue3中,有时我们需要直接操作DOM节点，本文主要介绍了Vue3获取和操作DOM元素的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
环境：vue3+ts+vite
目标：
1.修改DOM的文本值和样式
2.获取后代子DOM元素,操作修改
<template>
<div class="content">
<h1>演示</h1>
<p ref="pText1">这是ref为pText1的一段文本</p>
</div>
</template>
<script lang="ts" setup>
import {ref} from 'vue'
const pText1=ref()
console.log(pText1.value)
</script>
发现此时定义的 pText1 打印的值是undefined，这个情况发生原因是未真正获取到DOM元素，并不是我们定义的 const pText1=ref() 里面是空的问题。于是在生命钩子里面执行看看是什么？
<template>
<div class="content" style="padding: 0 30px;">
<h1>演示</h1>
<p ref="pText1">这是ref为pText1的一段文本</p>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
console.log(pText1.value)
onMounted(()=>{
console.log(pText1.value)
})
</script>
看到了吧。那接下来就知道怎么操作了,加一下颜色
onMounted(()=>{
console.log(pText1.value)
pText1.value.style.color='red'
})
再改个文本值看看
onMounted(()=>{
console.log(pText1.value)
pText1.value.style.color='red'
pText1.value.innerText='我是修改后的文本值'
})
当然，我们不一定要页面加载就执行，我们可以定义一个方法来执行DOM修改操作：
<template>
<div class="content" style="padding: 0 30px;">
<h1>演示</h1>
<p ref="pText1">这是ref为pText1的一段文本</p>
<el-button @click="changeText" type="primary">点我修改</el-button>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
const changeText=()=>{
console.log(pText1.value)
pText1.value.style.color='red'
pText1.value.innerText='我是点击后修改的文本值'
}
/*onMounted(()=>{
console.log(pText1.value)
pText1.value.style.color='red'
pText1.value.innerText='我是修改后的文本值'
})*/
</script>点击按钮前：
点击按钮后：
获取后代子DOM元素,操作修改
<template>
<div class="content" style="padding: 0 30px;">
<h1>演示</h1>
<p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaa</span></p>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{
//console.log(pText1)
console.log(pText1.value.children[0].innerHTML)
pText1.value.children[0].style.color='red';
pText1.value.children[0].innerText='我是修改后的span的文本';
})
</script>
总之，想要获取DOM元素属性，可以先打印出来，按需取值即可：
<template>
<div class="content" style="padding: 0 30px;">
<h1>演示</h1>
<p ref="pText1">这是ref为pText1的一段文本 <span>aaaaaaa</span></p>
</div>
</template>
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
const pText1=ref()
onMounted(()=>{
console.log(pText1)
})
</script>
到此这篇关于Vue3获取和操作DOM元素的项目实践的文章就介绍到这了,更多相关Vue3获取和操作DOM内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在我们实际项目开发过程中，会非常频繁地和 Vue 组件的生命周期打交道，接下来我们就从源码的角度来看一下这些生命周期的钩子函数是如何被执行的,需要的朋友可以参考下面文章内容2021-09-09
这篇文章主要介绍了VUE使用axios调用后台API接口的方法，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-08-08
这篇文章主要介绍了Vue 样式切换及三元判断样式关联操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue父子组件的数据传递示例,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
vue2.0结合Element实现select动态控制input禁用实例
本篇文章主要介绍了vue2.0结合Element实现select动态控制input禁用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要为大家详细介绍了vue实现滑动验证条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了vue实现带放大镜的搜索框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要给大家介绍了关于vue项目接入高德地图点击地图获取经纬度以及省市区功能的相关资料,开发中我们需要地图定位,就是用户输入位置,自动定位获取经纬度,需要的朋友可以参考下2023-08-08
在项目中会多次使用表格展示数据,不对这个table进行二次封装成我们自己想要的,重复的代码量的工作会比较大,下面这篇文章主要给大家介绍了关于elementUI el-table二次封装的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue组件全局注册实现警告框的实例,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
最新评论