快捷導(dǎo)航

Vue3獲取和操作DOM元素的項目實踐

更新時間：2023年08月10日 10:17:21 作者：鍵指江湖

在Vue3中,有時我們需要直接操作DOM節(jié)點，本文主要介紹了Vue3獲取和操作DOM元素的項目實踐,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

環(huán)境：vue3+ts+vite

目標(biāo)：

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>

發(fā)現(xiàn)此時定義的 pText1 打印的值是undefined，這個情況發(fā)生原因是未真正獲取到DOM元素，并不是我們定義的 const pText1=ref() 里面是空的問題。于是在生命鉤子里面執(zhí)行看看是什么？

<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='我是修改后的文本值'
})

當(dāng)然，我們不一定要頁面加載就執(zhí)行，我們可以定義一個方法來執(zhí)行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>