vue3獲取元素并且修改元素樣式的實(shí)戰(zhàn)操作
需求：獲取元素的樣式并且修改元素樣式
主要應(yīng)用場(chǎng)景：點(diǎn)擊元素后樣式變化
在項(xiàng)目開(kāi)發(fā)中，經(jīng)常會(huì)遇到一些改變樣式的操作，不同于一般點(diǎn)擊進(jìn)行數(shù)字的變化，對(duì)樣式的改變需要獲取元素的style，筆者瀏覽了目前論壇上的些許文章，大部分都是基于vue2的操作，本篇博客敘述在vue3的條件下進(jìn)行獲取元素并修改樣式，主要涉及的API有ref和nextTick
操作主要分為如下幾個(gè)部分，文章最后附完整的代碼框架
①在要操作的元素上綁定ref
<div ref='div' style='width:'50px'>
②在script部分導(dǎo)入ref和nextTick
import { ref,nextTick} from 'vue'
③在script部分使得要操作的元素響應(yīng)式即綁定ref
const div = ref()
④利用async await和nextTick
//需要在元素綁定函數(shù)a 這里忽略
async function a () {
await nextTick()
div.value.style.width="100px"
難點(diǎn)是在于為什么要使用async await和nextTick
如果不這樣使用的話，會(huì)報(bào)錯(cuò)：parameter 1 is not of type ‘Element’
這個(gè)報(bào)錯(cuò)的原因大意是操作者在操作還沒(méi)渲染的元素，或者說(shuō)是想要操作的樣式還沒(méi)有對(duì)應(yīng)的元素出現(xiàn)
那我們學(xué)習(xí)了vue3之后，懂得在nextTick后Dom已經(jīng)更新，所以通過(guò)結(jié)合async await和nextTick可以使得元素在渲染過(guò)后進(jìn)行有效的修改
下圖來(lái)自vue3官方文檔
完整操作示例代碼：
<template>
<div ref='div' style='width:'50px'>
</template>
<script setup>
import { ref,nextTick} from 'vue'
const div = ref()
async function a () {
await nextTick()
div.value.style.width="100px"
}
</script>
總結(jié)
到此這篇關(guān)于vue3獲取元素并且修改元素樣式的文章就介紹到這了,更多相關(guān)vue3獲取元素并修改樣式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁(yè)功能思路詳解
今天做項(xiàng)目需要一份根據(jù)本地?cái)?shù)據(jù)的篩選分頁(yè)功能，下面小編把vuejs實(shí)現(xiàn)本地?cái)?shù)據(jù)的篩選分頁(yè)功能的實(shí)現(xiàn)思路分享到腳本之家平臺(tái)，需要的朋友可以參考下2017-11-11
關(guān)于vue中hash和history的區(qū)別與使用圖文詳解
vue-router中有hash模式和history模式,下面這篇文章主要給大家介紹了關(guān)于vue中hash和history的區(qū)別與使用的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫(kù)的方法
fontawesome的圖標(biāo)有免費(fèi)版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫(kù),主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫(kù),無(wú)須全部下載,對(duì)vue?fontawesome圖標(biāo)庫(kù)相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了Vue彈窗組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
vue數(shù)組中不滿足條件跳出循環(huán)問(wèn)題
這篇文章主要介紹了vue數(shù)組中不滿足條件跳出循環(huán)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本文詳細(xì)講解了Vue的生命周期，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
這篇文章主要介紹了Vue中$attrs與$listeners的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
在理解淺拷貝和深拷貝淺前，必須先理解基本數(shù)據(jù)類型和引用數(shù)據(jù)類型的區(qū)別，這篇文章主要介紹了Vue淺拷貝和深拷貝實(shí)現(xiàn)方案及區(qū)別對(duì)比分析,需要的朋友可以參考下2023-03-03
Vue單文件組件開(kāi)發(fā)實(shí)現(xiàn)過(guò)程詳解
這篇文章主要介紹了Vue單文件組件開(kāi)發(fā)實(shí)現(xiàn)過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07