Vue3如何获取和操作DOM元素

Vue3如何获取和操作DOM元素

环境:vue3+ts+vite

目标:

1.修改DOM的文本值和样式

2.获取后代子DOM元素,操作修改

html 复制代码
<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()里面是空的问题。于是在生命钩子里面执行看看是什么?

html 复制代码
<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>

看到了吧。那接下来就知道怎么操作了,加一下颜色

javascript 复制代码
onMounted(()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
})

再改个文本值看看

javascript 复制代码
onMounted(()=>{
    console.log(pText1.value)
    pText1.value.style.color='red'
    pText1.value.innerText='我是修改后的文本值'
})

当然,我们不一定要页面加载就执行,我们可以定义一个方法来执行DOM修改操作:

html 复制代码
<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元素,操作修改

html 复制代码
<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元素属性,可以先打印出来,按需取值即可:

html 复制代码
<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>
相关推荐
然我4 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆4 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder12 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang20 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol28 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
然我38 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react