在日常开发中:style的使用也是比较常见的:
亲测有效
1.最通用的写法
<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>
2.三元表达式
<a :style="{height:(index==0?'89': ''),margin:(index == 0?'52px 37px':'')color:(index==0?arr.conFontColor:'#000')}" :href="con.subTitleHref" target="_self">{{con.subTitle}}</a>
3. 还可以以上两种方法结合起来
<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>
注意:这两种方式有个弊端,当需要把很多个样式添加到div上时,div看起来很臃肿
4.用计算属性
结合计算属性 将样式都提出来 最后形成一个变量 把这个变量添加到div上
这里要做的工作分几步:
- 通过计算属性把要放到一起的样式归整一下
- 针对默认值是空值或者特定值的样式 是不需要将这个样式放到div上的。
-
举例:如果div 已在css样式里设置了font-size 是16px,那么div行内样式 就不要存在font-size:16px 这种重复没有意义 就要做判断去除
这里想到的办法是:
用一个变量存入16 这里是conFontSize,如果conFontSize值等于16 那么就让font-size:''为空 然后通过循环style 将为空的font-size 去掉。
如果不等于16 就是修改的,就要正常显示
-
将:style="arr.styles.conTitleStyle"添加到div上
代码如下:
html
<p :style="arr.styles.conTitleStyle">{{con.title}}</p>
js
data(){
return {
arr:{
styles:{
//存放的是 动态修改的样式
conTitleStyle:{},// 内容标题总样式
conLiStyle:{},//内容li总样式
},
pieceStyle:{
conFontFamily:"",
conFontSize:16,
conFontColor:"",
conBgColor:"",
conLineHeight:21,// Writing 专用
conLRCenter:"",// 对齐方式
conTopRow:0,//首行缩进
conLetterSpace:0,//字体间隔
conFontBold:"",//加粗
conSpace:""//文字是否省略
}
}
}
},
computed:{
diyConTitleStyle:function(){
var pieceD = this.arr.pieceStyle;
var fontSizeNum;
// 判断对应模块fontSize的默认值 (默认值设置的和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)
}
// 判断对应模块lineheight的默认值
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
}
//过滤掉即删除掉空值的参数和数值
for (var i in dt) {
dt[i]==""?delete(dt[i]):1
}
return dt
}
},
watch:{
arr:{
handler(newValue, oldValue) {
// 监听是为了把更改后的样式及时保存到arr.styles里,最后arr是要提交的
this.arr=newValue;
this.arr.styles.conTitleStyle=this.diyConTitleStyle;
this.arr.styles.conLiStyle=this.diyConLiStyle;
}
deep: true
}
}
最后成果 当font-size是16px时:
当font-size 不是16px时 行内样式出现font-size了
5.在:style放两个class样式怎么放
用&& 连接
<p :style="arr.styles.conTitleStyle&&arr.styles.conLiStyle">{{con.title}}</p> 错误
发现只有后面的那个生效。
我希望两个都生效 所以得用数组:正确
<p :style="[arr.styles.conTitleStyle,arr.styles.conLiStyle]">{{con.title}}</p>