vue class或style 动态表达式

:class="index===tableIndex-1 ? 'trBac' : ''"

 

:style="{background:(bacFlag === 'search'?'#10A6B4':'')}"

 

对象写法：

　　  html :style="{color:(index==0?conFontColor:'#000')}"

   html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

数组写法：

　　html :style="[baseStyles, overridingStyles]"

　　html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

三元运算写法

　　html :style="{color:(index==0?conFontColor:'#000')}"

   html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

 

多重值：

　　此时，浏览器会根据运行支持情况进行选择

　　html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

　　

绑定data对象：

　　html :style="styleObject"

　　

data() {
    return{
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }  
    }
}

 

1. class样式

　　　　写法：class=”xxx” xxx可以是字符串、对象、数组。

　　　　字符串写法适用于：类名不确定，要动态获取。

　　　　对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。

　　　　数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

1. style样式

　　　　:style=”{fontSize:xxx}”其中xxx是动态值。

　　　　:style=”[a,b]”其中a、b是样式对象。（样式对象：存在的css样式）

 

 

vue动态添加背景图片

 

:style="{'backgroundImage': item.isShow?

                        'url('+require('@/assets/img/tabbarYes.png')+')'

                        :'url('+require('@/assets/img/tabbarNo.png')+')',

                       

                        'background-repeat':'no-repeat',

                        'background-size':'100%'

                        }"

 

 

 

 

 

 

参考：https://blog.csdn.net/weixin_30736301/article/details/100093744