vue中样式动态绑定写法

绑定样式:

class样式

写法:class="xxx"xXX可以是字符串、对象、数组。
字符串写法适用于:类名不确定，要动态获取。
对象写法适用于:要绑定多个样式,个数不确定，名字也不确定。
数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。

style样式

:style="{fontSize: xxx}“其中xxx是动态值。
:style=”[a,b]"其中a、b是样式对象。

vue中，动态绑定样式——动态绑定style写法 & 动态class写法

1、动态绑定style写法

注意:

• 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
• 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff’而不是 backgroundColor:#00a2ff

1.1、对象

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div><div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

1.2、数组

<div :style="[baseStyles, overridingStyles]"></div><div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

1.3、三元运算符

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div><div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div><div :style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div><!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div><!-- 写法二 -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div><!-- 写法三 -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>

1.4、绑定data对象

<div :style="styleObject"></div><script>data() {return{styleObject: {color: 'red',fontSize: '14px'}  }}
</scrip>

2、动态class写法

2.1、对象方法

<!-- isActive —— true/false -->
<div :class="{ 'active': isActive  }">{{name}}</div> 

2.2、判断是否绑定一个active

<div :class="{'active' : isActive == -2}"  >{{name}}</div><div :class="{'active' : isActive == item.nameId}"  >{{item.name}}</div>

2.3、绑定并判断多个
2.3.1、第一种：用逗号隔开

<div :class="{ 'active': isActive, 'user': isUser }"></div>

2.3.2、放在data里面

<div :class="classObject">{{name}}</div><script>
data() {return {classObject:{ active: true, user:false }}
}
</script>

2.3.3、使用computed属性

<div :class="classObject">{{name}}</div><script>
data() {return {isActive: true,isUser: false}
},
computed: {classObject: function () {return {active: this.isActive,user:this.isUser}}
}
</script>

2.4、数组方法

2.4.1、单纯数组

<div :class="[isActive,isUser]">{{name}}</div><script>
data() {return{isActive:'active',isUser:'user'}
}
</script>

2.4.2、数组与三元运算符结合判断选择需要的class

• 注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染

:class=“[isActive?‘active’:’’]”
或者
:class=“[isActive1?‘active’:’’]”
或者
:class=“[isActiveindex?‘active’:’’]”
或者
:class=“[isActive==index?‘active’:‘otherActiveClass’]”

2.4.3、数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class=“[{ active: isActive }, ‘sort’]”
或者
:class=“[{ active: isActive1 }, ‘sort’]”
或者
:class=“[{ active: isActiveindex }, ‘sort’]”