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 就是修改的,就要正常显示。

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

站内部分资源收集于网络,若侵犯了您的合法权益,请联系我们删除!
赞赏是最好的支持
如果对你有帮助那就支持一下吧
立即赞赏
分享到:
赞(0) 打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏