在vue中:style 的使用方式汇总

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

<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>

<p :style="{fontFamily:arr.conFontFamily,fontSize:(arr.conFontSize!=0.36?arr.conFontSize+arr.conFontUnit:''),color:arr.conFontColor,backgroundColor:arr.conBgColor}">{{con.title}}</p>

<p :style="arr.styles.conTitleStyle">{{con.title}}</p>

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
    }
}

<p :style="[arr.styles.conTitleStyle,arr.styles.conLiStyle]">{{con.title}}</p>