vue3獲取元素并且修改元素樣式的實戰(zhàn)操作
更新時間：2023年04月03日 09:37:14 作者：前端小王hs
ref作為在vue里面我們獲取元素最常用的一個api,在vue3迎來改造,下面這篇文章主要給大家介紹了關(guān)于vue3獲取元素并且修改元素樣式的相關(guān)資料,需要的朋友可以參考下
需求：獲取元素的樣式并且修改元素樣式
主要應(yīng)用場景：點擊元素后樣式變化
在項目開發(fā)中，經(jīng)常會遇到一些改變樣式的操作，不同于一般點擊進行數(shù)字的變化，對樣式的改變需要獲取元素的style，筆者瀏覽了目前論壇上的些許文章，大部分都是基于vue2的操作，本篇博客敘述在vue3的條件下進行獲取元素并修改樣式，主要涉及的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é)習了vue3之后，懂得在nextTick后Dom已經(jīng)更新，所以通過結(jié)合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>
總結(jié)
到此這篇關(guān)于vue3獲取元素并且修改元素樣式的文章就介紹到這了,更多相關(guān)vue3獲取元素并修改樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
今天小編就為大家分享一篇vue中當圖片地址無效的時候,顯示默認圖片的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
本文給大家分享的是如何使用vue實現(xiàn)鼠標點擊選中的效果，附上了實例代碼，有需要的小伙伴可以參考下2020-10-10
這篇文章主要為大家詳細介紹了vue前后分離調(diào)起微信支付，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)帶自動吸附功能的懸浮球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue請求后端接口導(dǎo)出excel表格方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了vue.js實現(xiàn)簡單計時器功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
Vue Router是Vue提供的路由管理器,將組件與路由一一對應(yīng)起來,這種對應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來解決跨域的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10