vue :style 的使用方法

vue :style 的使用方法

首先说一下这个不是什么新鲜棘手的问题，就是因为我总是隔一段时间不写代码就忘记，所以整理到这里存粹是为了方便我自己，记忆里不好呢。

方法2： 最常用的写法

<p :style="{fontFamily:arr.conFontFamily,color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

方法2： 三元表达式【项目中复杂的样式常用】

<a 
    :style="{color:(index==0?arr.conFontColor:'#000')}" 
    :href="con.subTitleHref" 
    target="_self">{{con.subTitle}}</a>

方法3： 1和2联合起来写

<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看起来很臃肿

三 ,结合计算属性 将样式都提出来 最后形成一个变量 把这个变量添加到div上

这里要做的工作分几步

• 1>通过计算属性把要放到一起的样式归整一下
• 2>针对默认值是空值或者特定值的样式 是不需要将这个样式放到div上的。

举例：如果div 已在css样式里设置了font-size 是16px，那么div行内样式 就不要存在font-size:16px 这种重复没有意义 就要做判断去除

这里想到的办法是：

用一个变量存入16 这里是conFontSize，如果conFontSize值等于16 那么就让font-size:”为空 然后通过循环style 将为空的font-size 去掉。如果不等于16 就是修改的，就要正常显示。

分享就到这里吧！有好的在补更！