在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.用計(jì)算屬性
結(jié)合計(jì)算屬性 將樣式都提出來 最后形成一個變量 把這個變量添加到div上
這里要做的工作分幾步：
- 通過計(jì)算屬性把要放到一起的樣式歸整一下
- 針對默認(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一樣) 如果等于就讓這一項(xiàng)的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 封裝防刷新考試倒計(jì)時組件的實(shí)現(xiàn)
這篇文章主要介紹了Vue 封裝防刷新考試倒計(jì)時組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue.js實(shí)現(xiàn)微信過渡動畫左右切換效果
這篇文章主要給大家介紹了利用Vue.js仿微信過渡動畫左右切換效果的相關(guān)資料，需要用到的技術(shù)棧是Vue+Vuex。文中通過示例代碼介紹的非常詳細(xì)，對大家具一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)點(diǎn)擊按鈕倒計(jì)時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了vue?首頁加載,速度優(yōu)化及解決首頁白屏的問題，具有很好的參考價值，希望對大家有所幫助。2022-10-10
<keep-alive> 是一個抽象組件,它自身不會渲染一個DOM元素,也不會出現(xiàn)在組件的父組件鏈中,下面這篇文章主要給大家介紹了關(guān)于vue3利用keepAlive緩存頁面的相關(guān)資料,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue3.0 子組件如何修改父組件傳遞過來的值，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue3頁面如何自適應(yīng)表格滾動高度,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-02-02
關(guān)于iview按需引用后使用this.$Modal報錯的解決
這篇文章主要介紹了關(guān)于iview按需引用后使用this.$Modal報錯的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue3組件之間傳值及適用場景分析,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2025-05-05
上一篇文章我們介紹了利用Vue3 創(chuàng)建Vue CLI 項(xiàng)目（一），接下來就來看看Vue3集成Ant Design Vue 的相關(guān)資料，需要的小伙伴可以參考一下文章的具體內(nèi)容2021-10-10