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