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 = "{'属性名称':数据}"

world

2、:style = 数据

world11

二、绑定class

1、:class="数据"

hello

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

大家好

3、

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

 
样式

总结

        
样式
        
大家好
        
hello
        
        
world
        
world11