亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序圖文詳解

 更新時間：2023年04月18日 09:57:34   作者：愛彈吉他的小盆友  
在項目中,我們時常會遇到動態(tài)的去綁定操作切換不同的CSS樣式,下面這篇文章主要給大家介紹了關(guān)于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

本編記錄了Vue3中動態(tài)修改CSS樣式的方法，在項目中，經(jīng)常會遇到CSS樣式要變更的地方。

文章后面有對【級聯(lián)樣式優(yōu)先級順序】的復(fù)習(xí)

一、ref修改樣式

1、通過 Vue 的 ref 組件獲取 DOM 元素節(jié)點(diǎn)

通過ref對元素實現(xiàn)動態(tài)綁定，可以獲取到對應(yīng)的DOM元素節(jié)點(diǎn)，代碼如下：

提示：以下代碼語法采用Vue3比較精簡的setup語法糖展示

<template>
  <div class="squareClass" ref="squareRef">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'
//聲明squareRef對應(yīng)ref對象為一個常量
const squareRef = ref()

onMounted(() => {
  //setup語法用.value獲取ref對象的值
  console.log('獲取到的DOM對象: ' + squareRef.value)
  console.log(squareRef.value)
})
</script>

瀏覽器控制臺打印結(jié)果如下：

注：這邊比較一下，和 DOM操作 document.getElementById(‘id’) 這個方法有什么區(qū)別

Vue中，在生命周期create階段ref組件就會對DOM節(jié)點(diǎn)進(jìn)行動態(tài)綁定

如果在Vue3中要使用 document.getElementById(‘id’) 這個方法的話

要在onMounted組件中獲取節(jié)點(diǎn)，代碼如下：

<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>

瀏覽器控制臺打印結(jié)果如下：

2、通過 ref 修改 DOM 元素節(jié)點(diǎn)樣式

以下代碼展示的是通過 ref 來修改樣式，代碼如下：

<template>
  <div ref="squareRef">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'

const squareRef = ref()

onMounted(() => {
  //ref修改DOM節(jié)點(diǎn)樣式,DOM操作document.getElementById('id')的寫法一樣，只不過去掉了.value，所以原理上是一樣的
  squareRef.value.style.width = '200px'
  squareRef.value.style.height = '200px'
  //這邊樣式名稱有點(diǎn)小小的區(qū)別，在CSS中背景顏色的屬性名稱為：background-color，在style對象中的"-"符號不能用來引用屬性值
  //所以這邊一律使用駝峰命名方式來調(diào)取CSS屬性或賦值，background-color對應(yīng)backgroundColor
  squareRef.value.style.backgroundColor = 'greenyellow'
  squareRef.value.style.border = '5px dashed green'
})
</script>

效果展示：

二、通過v-bind對Html元素的樣式(style)進(jìn)行動態(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進(jìn)行動態(tài)綁定之后，這個style的對象除了用ref組件重新賦值之外

通過ref.value.style是不能對動態(tài)綁定的對象進(jìn)行修改的。

<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組件進(jìn)行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>

結(jié)果展示：

我明明已經(jīng)修改了樣式，怎么不生效呢？

因為該樣式對象已被動態(tài)綁定，就算修改了值，也會馬上變回去

這時候只有通過修改動態(tài)綁定的style對象，才能對其進(jìn)行修改

代碼如下：

<template>
  <div :style="squareStyle">
  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue'

const squareStyle = ref()

onMounted(() => {
  //第一個樣式是天空藍(lán)圓形
  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>

結(jié)果展示：

修改的樣式會把前一次的樣式整個覆蓋掉（上面的borderRadius屬性不見了），這是需要注意的地方

四、【級聯(lián)樣式優(yōu)先級順序】復(fù)習(xí)

這邊我們復(fù)習(xí)一下關(guān)于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標(biāo)簽里用link標(biāo)簽引入的樣式文件為【外聯(lián)式樣式】 -->
    <link rel="stylesheet" href="CSS.css" rel="external nofollow"  type="text/css">
    <!-- 在head標(biāo)簽里的style標(biāo)簽為【內(nèi)聯(lián)式樣式】 -->
    <style>
        .circle {
            /* 這邊我們用background-color（背景顏色）來做級聯(lián)優(yōu)先級測試  */
            /* 加上【 !important 】最高優(yōu)先級關(guān)鍵字來進(jìn)行標(biāo)注和比較  */
            background-color: greenyellow !important; /* 內(nèi)聯(lián)式樣式的背景顏色為【黃綠色】 */
        }
    </style>
</head>
<body>
<!-- 在元素標(biāo)簽中，style屬性代表級聯(lián)樣式類型中的【內(nèi)嵌式樣式】 -->
<div class="circle"
     style="width: 200px;
            background-color: skyblue !important; /* 內(nèi)嵌式樣式的背景顏色為【天空藍(lán)】 */
            height: 200px;border: 5px blue dashed;
            border-radius: 110px">
</div>
<script>
</script>
</body>
</html>

注：IE6瀏覽器不支持【 !important 關(guān)鍵字 】

【外聯(lián)式樣式】的 CSS.css 文件內(nèi)容如下：

/* 外聯(lián)式樣式中，背景顏色為【深粉色】 */
.circle {
    background-color: deeppink !important;
}

頁面效果展示：

我們來標(biāo)記一下三個樣式級別在頁面中圓形的CSS背景顏色：

  • 內(nèi)嵌式樣式： 天空藍(lán)
  • 內(nèi)聯(lián)式樣式： 黃綠色
  • 外聯(lián)式樣式： 深粉色

所以這邊展示后得到的結(jié)果說明最高級別的樣式為： 【 內(nèi)嵌式樣式 】

【級聯(lián)樣式優(yōu)先級順序】測試結(jié)果如下圖所示：

五、總結(jié)

實際上，動態(tài)綁定style的優(yōu)先級是大于對style樣式進(jìn)行修改的

這邊項目上有時候代碼多了，可能忘了某個樣式動態(tài)綁定過就給它通過style修改了樣式

發(fā)現(xiàn)不生效，這時候排查問題就會發(fā)現(xiàn)它已經(jīng)有動態(tài)綁定的值了

所以才寫了這篇來加深記憶和幫助一下遇到同樣問題的朋友

到此這篇關(guān)于Vue3中動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序的文章就介紹到這了,更多相關(guān)Vue3動態(tài)修改樣式與級聯(lián)樣式優(yōu)先順序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論