vue中動(dòng)態(tài)添加style樣式的幾種寫(xiě)法總結(jié)
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í)文本顏色的切換效果，如下圖所示：
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-resouce設(shè)置請(qǐng)求頭的三種方法
本篇文章主要介紹了vue-resouce設(shè)置請(qǐng)求頭的三種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
這篇文章主要介紹了vue如何實(shí)現(xiàn)自定義底部菜單欄,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue搜索和vue模糊搜索，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說(shuō)明
這篇文章主要介紹了vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要給大家介紹了關(guān)于axios封裝與傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享
這篇文章主要介紹了Vue??vuex配置項(xiàng)和多組件數(shù)據(jù)共享案例分享，文章圍繞Vue?Vuex的相關(guān)資料展開(kāi)配置項(xiàng)和多組件數(shù)據(jù)共享的案例分享，需要的小伙伴可以參考一下2022-04-04
vue下如何利用canvas實(shí)現(xiàn)在線(xiàn)圖片標(biāo)注
這篇文章主要介紹了vue下如何利用canvas實(shí)現(xiàn)在線(xiàn)圖片標(biāo)注，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3項(xiàng)目在IE瀏覽器打開(kāi)兼容問(wèn)題及解決
這篇文章主要介紹了vue-cli3項(xiàng)目在IE瀏覽器打開(kāi)兼容問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
證件圖片識(shí)別上傳根據(jù)業(yè)務(wù)需要，經(jīng)常涉及到證件上傳，例如身份證上傳、銀行卡、營(yíng)業(yè)執(zhí)照等信息，根據(jù)設(shè)計(jì)師的設(shè)計(jì)，單獨(dú)封裝了一個(gè)上傳組件，這篇文章主要介紹了vue3?證件識(shí)別上傳組件封裝,需要的朋友可以參考下2023-05-05
vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)
這篇文章主要介紹了vue-element如何實(shí)現(xiàn)動(dòng)態(tài)換膚存儲(chǔ)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04