Vue class与style绑定

class与style都是属性，所以可以用 v-bind (:)处理，只需要通过表达式字符串即可。

.active{
      color:blue;
}
.fontSize{
      font-size: 20px;
}

const vm = new Vue({
            el:'#app',
            data:{              
                isactive:true,
                activeClass:'active',//数据activeClass使用active样式
                fontSize:'26',
                fontSizeClass: 'fontSize',//数据fontSizeClass使用fontSize样式
                activeColor:{'color':'red', 'background':'blue'},//数据写入样式
            }
 });

一、绑定style

1、:style = "{'属性名称':数据}"

<div :style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">world</div>

2、:style = 数据

<div :style="activeColor">world11</div>

二、绑定class

1、:class="数据"

<div :class="fontSizeClass">hello</div>

2、:class="{'样式':是否显示}"

<div :class="{'active':isactive}">大家好</div>

3、

• :class="['数据',‘数据‘]"可以是数组
• :class="['样式',‘样式‘]"可以是数组

 <div :class="['active',fontSizeClass]">样式</div>

总结

<div id="app">
        <div :class="['active',fontSizeClass]">样式</div>
        <div :class="{'active':isactive}">大家好</div>
        <div :class="fontSizeClass">hello</div>
        <!-- style -->
        <div :style="{ 'color': activeColor, 'font-size': fontSize + 'px' }">world</div>
        <div :style="activeColor">world11</div> 
    </div>