在vue中:style 的几种使用方式

在日常开发中:style 的使用也是比较常见的：

亲测有效

1. 最通用的写法 

{{con.title}}

2. 三元表达式

{{con.subTitle}}

3. 还可以以上两种方法结合起来

{{con.title}}

注意： 这两种方式有个弊端，当需要把很多个样式添加到 div 上时，div 看起来很臃肿

4. 用计算属性

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

这里要做的工作分几步：

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

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

   这里想到的办法是：

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

   如果不等于 16 就是修改的，就要正常显示

4. 将:style=”arr.styles.conTitleStyle” 添加到 div 上

代码如下：

html

{{con.title}}

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 样式怎么放

用 && 连接

{{con.title}}

  错误

发现只有后面的那个生效。

我希望两个都生效 所以得用数组：正确

{{con.title}}