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