在vue中:style 的使用方式匯總
更新時間：2024年09月23日 12:14:10 作者：群狼之虎
在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧
在日常開發(fā)中:style的使用也是比較常見的：
親測有效
1.最通用的寫法
<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>2.三元表達(dá)式
<a :style="{height:(index==0?'89': ''),margin:(index == 0?'52px 37px':'')color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" rel="external nofollow" target="_self">{{con.subTitle}}</a>3. 還可以以上兩種方法結(jié)合起來
<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>注意：這兩種方式有個弊端，當(dāng)需要把很多個樣式添加到div上時，div看起來很臃腫
4.用計算屬性
結(jié)合計算屬性 將樣式都提出來 最后形成一個變量 把這個變量添加到div上
這里要做的工作分幾步：
- 通過計算屬性把要放到一起的樣式歸整一下
- 針對默認(rèn)值是空值或者特定值的樣式 是不需要將這個樣式放到div上的。
- 舉例：如果div 已在css樣式里設(shè)置了font-size 是16px，那么div行內(nèi)樣式 就不要存在font-size:16px 這種重復(fù)沒有意義 就要做判斷去除
這里想到的辦法是：
用一個變量存入16 這里是conFontSize，如果conFontSize值等于16 那么就讓font-size:''為空 然后通過循環(huán)style 將為空的font-size 去掉。
如果不等于16 就是修改的，就要正常顯示
將:style="arr.styles.conTitleStyle"添加到div上
代碼如下：
html
<p :style="arr.styles.conTitleStyle">{{con.title}}</p>js
data(){
return {
arr:{
styles:{
//存放的是 動態(tài)修改的樣式
conTitleStyle:{},// 內(nèi)容標(biāo)題總樣式
conLiStyle:{},//內(nèi)容li總樣式
},
pieceStyle:{
conFontFamily:"",
conFontSize:16,
conFontColor:"",
conBgColor:"",
conLineHeight:21,// Writing 專用
conLRCenter:"",// 對齊方式
conTopRow:0,//首行縮進(jìn)
conLetterSpace:0,//字體間隔
conFontBold:"",//加粗
conSpace:""http://文字是否省略
}
}
}
},
computed:{
diyConTitleStyle:function(){
var pieceD = this.arr.pieceStyle;
var fontSizeNum;
// 判斷對應(yīng)模塊fontSize的默認(rèn)值 (默認(rèn)值設(shè)置的和css fontsize一樣) 如果等于就讓這一項的css 為空 不等于就走conFontSize
if(this.arr.mtype=='Imglist'){
fontSizeNum=(pieceD.conFontSize!=12)
}else if(this.arr.mtype=='ImglistScroll'||this.arr.mtype=='NewsList2'){
fontSizeNum=(pieceD.conFontSize!=17)
}else if(this.arr.mtype=='NavList'){
fontSizeNum=(pieceD.conFontSize!=18)
}else if(this.arr.mtype=='NavDock'){
fontSizeNum=(pieceD.conFontSize!=14)
}else if(this.arr.mtype=='NewsList2'){
fontSizeNum=(pieceD.conFontSize!=15)
}else{
fontSizeNum=(pieceD.conFontSize!=16)
}
// 判斷對應(yīng)模塊lineheight的默認(rèn)值
if(this.arr.mtype=='NewsList'){
var lhnum=(pieceD.conLineHeight!=16)
}else if(this.arr.mtype=='Writing'){
var lhnum=(pieceD.conLineHeight!=21)
}
//console.log(lhnum)
var dt={
"color":pieceD.conFontColor,
"font-family":pieceD.conFontFamily,
"font-size":fontSizeNum?pieceD.conFontSize+"px":"",
"background-color":pieceD.conBgColor,
"line-height":(lhnum?pieceD.conLineHeight+'px':''),
"text-align":pieceD.conLRCenter,
"text-indent":(pieceD.conTopRow!=0?pieceD.conTopRow+'px':''),
"letter-spacing":(pieceD.conLetterSpace!=0?pieceD.conLetterSpace+'px':''),
"font-weight":pieceD.conFontBold,
"white-space":pieceD.conSpace
}
//過濾掉即刪除掉空值的參數(shù)和數(shù)值
for (var i in dt) {
dt[i]==""?delete(dt[i]):1
}
return dt
}
},
watch:{
arr:{
handler(newValue, oldValue) {
// 監(jiān)聽是為了把更改后的樣式及時保存到arr.styles里,最后arr是要提交的
this.arr=newValue;
this.arr.styles.conTitleStyle=this.diyConTitleStyle;
this.arr.styles.conLiStyle=this.diyConLiStyle;
}
deep: true
}
}最后成果 當(dāng)font-size是16px時：
當(dāng)font-size 不是16px時 行內(nèi)樣式出現(xiàn)font-size了
5.在:style放兩個class樣式怎么放
用&& 連接
<p :style="arr.styles.conTitleStyle&&arr.styles.conLiStyle">{{con.title}}</p> 錯誤
發(fā)現(xiàn)只有后面的那個生效。
我希望兩個都生效 所以得用數(shù)組：正確
<p :style="[arr.styles.conTitleStyle,arr.styles.conLiStyle]">{{con.title}}</p>到此這篇關(guān)于在vue中:style 的幾種使用方式的文章就介紹到這了,更多相關(guān)vue :style使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡單且高效的方式來構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10
Vue.js組件tree實現(xiàn)省市多級聯(lián)動
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tree實現(xiàn)省市多級聯(lián)動的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
el-table多選toggleRowSelection不生效解決方案
這篇文章主要給大家介紹了關(guān)于el-table多選toggleRowSelection不生效的解決方案,文中通過圖文以及代碼將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng))
這篇文章主要介紹了vue仿攜程輪播圖效果（滑動輪播,下方高度自適應(yīng)）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
vue推薦組件化開發(fā)，所以就把每個圖表封裝成子組件，然后在需要用到該圖表的父組件中直接使用。接下來給大家介紹vue 中 echart 在子組件中只顯示一次的問題，需要的朋友參考下吧2018-08-08
uniapp中使用lottie實現(xiàn)JSON動畫的操作步驟
這篇文章主要介紹了如何在項目中使用JSON動畫組件,包括創(chuàng)建目錄結(jié)構(gòu)、下載JSON文件、編寫自定義組件代碼以及組件的使用方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue實現(xiàn)登錄攔截，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue項目基于WebRTC實現(xiàn)一對一音視頻通話效果,實現(xiàn)代碼分為前端和后端兩部分代碼,需要的朋友可以參考下2024-05-05
本文主要介紹了el-table 行合并的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了如何在Vue中使用protobuf，protobuf是由google推出的和語言無關(guān)和平臺無關(guān)，幾乎支持當(dāng)前的大部分語言，如JavaScript,下文更多相關(guān)介紹需要的小伙伴可以參考一下2022-03-03