vue中動(dòng)態(tài)添加style樣式的幾種寫(xiě)法總結(jié)

更新時(shí)間：2022年10月09日 10:17:22 作者：D_jing20

這篇文章主要介紹了vue中動(dòng)態(tài)添加style樣式的幾種寫(xiě)法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue動(dòng)態(tài)添加style樣式總結(jié)

項(xiàng)目中可能會(huì)需要?jiǎng)討B(tài)添加 style 行內(nèi)樣式，但是在長(zhǎng)期維護(hù)的項(xiàng)目里面，盡量要避免使用。

注意：

1、凡是有 - 的style屬性名都要變成駝峰式，比如font-size要變成fontSize。

2、除了綁定值，其他的屬性名的值要用引號(hào)括起來(lái)，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff。

對(duì)象

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"
html :style="{color:(index==0?conFontColor:'#000')}"

數(shù)組

html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

三目運(yùn)算符

html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

多重值(瀏覽器會(huì)根據(jù)運(yùn)行支持情況進(jìn)行選擇)

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

綁定data對(duì)象

html :style="styleObject"
?
data() {
? ? return{
? ? ? styleObject: {
? ? ? ? color: 'red',
? ? ? ? fontSize: '13px'
? ? ? } ?
? ? }
}

vue3的style樣式的特性

scoped 屬性

定義的 CSS 就只會(huì)應(yīng)用到當(dāng)前組件的元素上，這樣就很好地避免了一些樣式?jīng)_突的問(wèn)題。

我們項(xiàng)目中的樣式也可以加上如下標(biāo)簽：

<style scoped>
h1 {
  color: red;
}
</style>>

這樣，組件就會(huì)解析成下面代碼的樣子。標(biāo)簽和樣式的屬性上，新增了 data- 的前綴，確保只在當(dāng)前組件生效。

<h1 data-v-3de47834="">1</h1>
<style scoped>
h1[data-v-3de47834] {
    color: red;
}
</style>

在 scoped 內(nèi)部，寫(xiě)全局的樣式

可以用:global 來(lái)標(biāo)記，這樣能確保你可以很靈活地組合你的樣式代碼

通過(guò)v-bind 函數(shù)，在 CSS 中使用 JavaScript 中的變量

<template>
  <div>
    <h1 @click="add">{{ count }}</h1>
  </div>
</template>
 
<script setup>
import { ref } from "vue";
let count = ref(1)
let color = ref('red')
function add() {
  count.value++
  color.value = Math.random()>0.5? "blue":"red"  // 隨機(jī)生成一個(gè)0-1之間點(diǎn)數(shù)字
}
</script>
 
<style scoped>
h1 {
// v-bind 函數(shù)綁定 color 的值
  color:v-bind(color);
}
</style>>

點(diǎn)擊累加器時(shí)文本顏色的切換效果，如下圖所示：