欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

前言

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

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

一、ref修改樣式

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

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

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

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

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

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

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

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

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

要在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ū)別少了個(gè).value
  console.log(squareId)
})
</script>

瀏覽器控制臺(tái)打印結(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對(duì)象中的"-"符號(hào)不能用來引用屬性值
  //所以這邊一律使用駝峰命名方式來調(diào)取CSS屬性或賦值，background-color對(duì)應(yīng)backgroundColor
  squareRef.value.style.backgroundColor = 'greenyellow'
  squareRef.value.style.border = '5px dashed green'
})
</script>

效果展示：

二、通過v-bind對(duì)Html元素的樣式(style)進(jìn)行動(dòng)態(tài)綁定

在Vue中，正常的v-bind寫法如下：

<div v-bind:style="squareStyle">

在項(xiàng)目使用中，我們普遍會(huì)省略掉前面的v-bind，簡(jiǎn)寫的方式如下：

<div :style="squareStyle">

這時(shí)候我們只要聲明一個(gè)變量或常量，初始化該變量或常量的ref的值為css對(duì)象

就可以實(shí)現(xiàn)樣式的動(dòng)態(tài)綁定，代碼如下：

提示：以下style樣式的動(dòng)態(tài)綁定采用簡(jiǎn)寫:style實(shí)現(xiàn) 

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

//聲明一個(gè)常量或變量即可實(shí)現(xiàn)樣式動(dòng)態(tài)綁定
const squareStyle = ref({
  width: '200px',
  height: '200px',
  backgroundColor: 'skyblue',
  border: '5px dotted blue',
  borderRadius: '110px'
})
</script>

效果展示：

三、v-bind:style動(dòng)態(tài)綁定和ref修改style樣式的區(qū)別

在Vue中，通過ref組件對(duì)style進(jìn)行動(dòng)態(tài)綁定之后，這個(gè)style的對(duì)象除了用ref組件重新賦值之外

通過ref.value.style是不能對(duì)動(dòng)態(tài)綁定的對(duì)象進(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動(dòng)態(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)修改了樣式，怎么不生效呢？

因?yàn)樵摌邮綄?duì)象已被動(dòng)態(tài)綁定，就算修改了值，也會(huì)馬上變回去

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

代碼如下：

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

const squareStyle = ref()

onMounted(() => {
  //第一個(gè)樣式是天空藍(lán)圓形
  squareStyle.value = {
    width: '200px',
    height: '200px',
    backgroundColor: 'skyblue',
    border: '5px dotted blue',
    borderRadius: '110px'
  }
  //第二個(gè)樣式是黃綠方塊
  squareStyle.value = {
    width: '300px',
    height: '300px',
    backgroundColor: 'greenyellow',
    border: '5px dashed green'
  }
})
</script>

結(jié)果展示：

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

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

這邊我們復(fù)習(xí)一下關(guān)于CSS樣式賦值的【級(jí)聯(lián)樣式優(yōu)先級(jí)順序】

下面代碼展示三種級(jí)聯(lián)樣式的類型：外聯(lián)式樣式、內(nèi)聯(lián)式樣式、內(nèi)嵌式樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>級(jí)聯(lián)樣式測(cè)試</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（背景顏色）來做級(jí)聯(lián)優(yōu)先級(jí)測(cè)試  */
            /* 加上【 !important 】最高優(yōu)先級(jí)關(guān)鍵字來進(jìn)行標(biāo)注和比較  */
            background-color: greenyellow !important; /* 內(nèi)聯(lián)式樣式的背景顏色為【黃綠色】 */
        }
    </style>
</head>
<body>
<!-- 在元素標(biāo)簽中，style屬性代表級(jí)聯(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)記一下三個(gè)樣式級(jí)別在頁面中圓形的CSS背景顏色：

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

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

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

五、總結(jié)

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

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

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

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

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

相關(guān)文章

最新評(píng)論