Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解
前言
本編記錄了Vue3中動態(tài)修改CSS樣式的方法，在項目中，經(jīng)常會遇到CSS樣式要變更的地方。
文章后面有對【級聯(lián)樣式優(yōu)先級順序】的復習
一、ref修改樣式
1、通過 Vue 的 ref 組件獲取 DOM 元素節(jié)點
通過ref對元素實現(xiàn)動態(tài)綁定，可以獲取到對應的DOM元素節(jié)點，代碼如下：
提示：以下代碼語法采用Vue3比較精簡的setup語法糖展示
<template>
<div class="squareClass" ref="squareRef">
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
//聲明squareRef對應ref對象為一個常量
const squareRef = ref()
onMounted(() => {
//setup語法用.value獲取ref對象的值
console.log('獲取到的DOM對象: ' + squareRef.value)
console.log(squareRef.value)
})
</script>
瀏覽器控制臺打印結果如下：
注：這邊比較一下，和 DOM操作 document.getElementById(‘id’) 這個方法有什么區(qū)別
Vue中，在生命周期create階段ref組件就會對DOM節(jié)點進行動態(tài)綁定
如果在Vue3中要使用 document.getElementById(‘id’) 這個方法的話
要在onMounted組件中獲取節(jié)點，代碼如下：
<template>
<div id="squareId">
</div>
</template>
<script setup>
import {onMounted} from 'vue'
let squareId
onMounted(() => {
squareId = document.getElementById('squareId')
//這邊和ref的調(diào)用區(qū)別少了個.value
console.log(squareId)
})
</script>
瀏覽器控制臺打印結果如下：
2、通過 ref 修改 DOM 元素節(jié)點樣式
以下代碼展示的是通過 ref 來修改樣式，代碼如下：
<template>
<div ref="squareRef">
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
const squareRef = ref()
onMounted(() => {
//ref修改DOM節(jié)點樣式,DOM操作document.getElementById('id')的寫法一樣，只不過去掉了.value，所以原理上是一樣的
squareRef.value.style.width = '200px'
squareRef.value.style.height = '200px'
//這邊樣式名稱有點小小的區(qū)別，在CSS中背景顏色的屬性名稱為：background-color，在style對象中的"-"符號不能用來引用屬性值
//所以這邊一律使用駝峰命名方式來調(diào)取CSS屬性或賦值，background-color對應backgroundColor
squareRef.value.style.backgroundColor = 'greenyellow'
squareRef.value.style.border = '5px dashed green'
})
</script>
效果展示：
二、通過v-bind對Html元素的樣式(style)進行動態(tài)綁定
在Vue中，正常的v-bind寫法如下：
<div v-bind:style="squareStyle">
在項目使用中，我們普遍會省略掉前面的v-bind，簡寫的方式如下：
<div :style="squareStyle">
這時候我們只要聲明一個變量或常量，初始化該變量或常量的ref的值為css對象
就可以實現(xiàn)樣式的動態(tài)綁定，代碼如下：
提示：以下style樣式的動態(tài)綁定采用簡寫:style實現(xiàn)
<template>
<div :style="squareStyle">
</div>
</template>
<script setup>
import {ref} from 'vue'
//聲明一個常量或變量即可實現(xiàn)樣式動態(tài)綁定
const squareStyle = ref({
width: '200px',
height: '200px',
backgroundColor: 'skyblue',
border: '5px dotted blue',
borderRadius: '110px'
})
</script>
效果展示：
三、v-bind:style動態(tài)綁定和ref修改style樣式的區(qū)別
在Vue中，通過ref組件對style進行動態(tài)綁定之后，這個style的對象除了用ref組件重新賦值之外
通過ref.value.style是不能對動態(tài)綁定的對象進行修改的。
<template>
<div ref="squareRef" :style="squareStyle">
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
const squareRef = ref(),
squareStyle = ref()
onMounted(()=>{
//v-bind:style動態(tài)綁定
squareStyle.value = {
width: '200px',
height: '200px',
backgroundColor: 'skyblue',
border: '5px dotted blue',
borderRadius: '110px'
}
//通過ref組件進行style樣式修改
squareRef.value.style.width = '300px'
squareRef.value.style.height = '300px'
squareRef.value.style.backgroundColor = 'greenyellow'
squareRef.value.style.border = '5px dashed green'
squareRef.value.style.borderRadius = ''
})
</script>
結果展示：
我明明已經(jīng)修改了樣式，怎么不生效呢？
因為該樣式對象已被動態(tài)綁定，就算修改了值，也會馬上變回去
這時候只有通過修改動態(tài)綁定的style對象，才能對其進行修改
代碼如下：
<template>
<div :style="squareStyle">
</div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
const squareStyle = ref()
onMounted(() => {
//第一個樣式是天空藍圓形
squareStyle.value = {
width: '200px',
height: '200px',
backgroundColor: 'skyblue',
border: '5px dotted blue',
borderRadius: '110px'
}
//第二個樣式是黃綠方塊
squareStyle.value = {
width: '300px',
height: '300px',
backgroundColor: 'greenyellow',
border: '5px dashed green'
}
})
</script>
結果展示：
修改的樣式會把前一次的樣式整個覆蓋掉（上面的borderRadius屬性不見了），這是需要注意的地方
四、【級聯(lián)樣式優(yōu)先級順序】復習
這邊我們復習一下關于CSS樣式賦值的【級聯(lián)樣式優(yōu)先級順序】
下面代碼展示三種級聯(lián)樣式的類型：外聯(lián)式樣式、內(nèi)聯(lián)式樣式、內(nèi)嵌式樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>級聯(lián)樣式測試</title>
<!-- 在head標簽里用link標簽引入的樣式文件為【外聯(lián)式樣式】 -->
<link rel="stylesheet" href="CSS.css" rel="external nofollow" type="text/css">
<!-- 在head標簽里的style標簽為【內(nèi)聯(lián)式樣式】 -->
<style>
.circle {
/* 這邊我們用background-color（背景顏色）來做級聯(lián)優(yōu)先級測試 */
/* 加上【 !important 】最高優(yōu)先級關鍵字來進行標注和比較 */
background-color: greenyellow !important; /* 內(nèi)聯(lián)式樣式的背景顏色為【黃綠色】 */
}
</style>
</head>
<body>
<!-- 在元素標簽中，style屬性代表級聯(lián)樣式類型中的【內(nèi)嵌式樣式】 -->
<div class="circle"
style="width: 200px;
background-color: skyblue !important; /* 內(nèi)嵌式樣式的背景顏色為【天空藍】 */
height: 200px;border: 5px blue dashed;
border-radius: 110px">
</div>
<script>
</script>
</body>
</html>
注：IE6瀏覽器不支持【 !important 關鍵字 】
【外聯(lián)式樣式】的 CSS.css 文件內(nèi)容如下：
/* 外聯(lián)式樣式中，背景顏色為【深粉色】 */
.circle {
background-color: deeppink !important;
}
頁面效果展示：
我們來標記一下三個樣式級別在頁面中圓形的CSS背景顏色：
- 內(nèi)嵌式樣式： 天空藍
- 內(nèi)聯(lián)式樣式： 黃綠色
- 外聯(lián)式樣式： 深粉色
所以這邊展示后得到的結果說明最高級別的樣式為： 【 內(nèi)嵌式樣式 】
【級聯(lián)樣式優(yōu)先級順序】測試結果如下圖所示：
五、總結
實際上，動態(tài)綁定style的優(yōu)先級是大于對style樣式進行修改的
這邊項目上有時候代碼多了，可能忘了某個樣式動態(tài)綁定過就給它通過style修改了樣式
發(fā)現(xiàn)不生效，這時候排查問題就會發(fā)現(xiàn)它已經(jīng)有動態(tài)綁定的值了
所以才寫了這篇來加深記憶和幫助一下遇到同樣問題的朋友
到此這篇關于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的文章就介紹到這了,更多相關Vue3動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了淺談Vue內(nèi)置component組件的應用場景，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
vue常用事件v-on:click詳解事件對象,事件冒泡,事件默認行為
這篇文章主要介紹了vue常用事件之v-on:click?以及事件對象，事件冒泡，事件默認行為,其實v-on后面跟的不止是click事件也可以是其他的事件，用法均相似，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
解決Element組件的坑:抽屜drawer和彈窗dialog
這篇文章主要介紹了解決Element組件的坑:抽屜drawer和彈窗dialog問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文主要介紹了Vue3里的EffectScope，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要為大家詳細介紹了Vue用戶管理的增刪改查功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要為大家介紹了Vue實例初始化為渲染函數(shù)設置檢查源碼剖析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單的購物車案例，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
整理項目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結合實例代碼介紹的非常詳細，需要的朋友可以參考下2023-02-02
這篇文章主要介紹了Vue中聲明式導航與編程式導航，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習吧2022-11-11
Rsbuild,一個基于Rspack的高效Web構建工具,將Rspack的強大功能與易用性相結合,是你項目搭建的不二之選,Rsbuild不僅提供了開箱即用的體驗,還引入了高性能的構建機制,本文給大家介紹了Vue2遷移Rsbuild詳細步驟,需要的朋友可以參考下2024-10-10