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)文章
vue中當(dāng)圖片地址無(wú)效的時(shí)候,顯示默認(rèn)圖片的方法
今天小編就為大家分享一篇vue中當(dāng)圖片地址無(wú)效的時(shí)候,顯示默認(rèn)圖片的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
本文給大家分享的是如何使用vue實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊選中的效果，附上了實(shí)例代碼，有需要的小伙伴可以參考下2020-10-10
這篇文章主要為大家詳細(xì)介紹了vue前后分離調(diào)起微信支付，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
利用vue.js把靜態(tài)json綁定bootstrap的table方法
今天小編就為大家分享一篇利用vue.js把靜態(tài)json綁定bootstrap的table方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue請(qǐng)求后端接口導(dǎo)出excel表格方式
這篇文章主要介紹了Vue請(qǐng)求后端接口導(dǎo)出excel表格方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能
這篇文章主要為大家詳細(xì)介紹了vue.js實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來(lái),這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下2024-06-06
vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題
下面小編就為大家分享一篇vue.js使用代理和使用Nginx來(lái)解決跨域的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
這篇文章主要介紹了Vue獲取DOM元素并修改屬性或者樣式，文中通過(guò)兩種方法給大家介紹了vue 如何獲取并操作DOM元素,需要的朋友可以參考下2022-10-10