VUE class style 样式控制

class

  .a{
            border:2px solid red;
     }
  .b{
            background: darkmagenta;
    }

 data:{
            title:"class && style 动态绑定 ",
            flagA:true,
            classObj:{
                b:true,
                c:true
            },
            isA:'a',
            isC:'c',
            id:1901,
            styleObj:{
                border:"2px solid green"
            },
            current:0
        },

 		<div id="box" class="a b c" ></div>       //正常书写方式
        <div id="box" :class="{a:flagA,c:true}" ></div>//传入一个字面量  条件  属性名为   样式的名字（class）
        <div id="box" :class="classObj" ></div>//{b:true,c:true} 传入一个字面量
        <div id="box" :class="[isA,isC]" ></div>//数组 传入类名
        <div id="box" :class="id==1901?'a':'c'" ></div>  //三目运算

style

  <div id="box" :style="{borderRadius:'40%',backgroundColor:'yellow'}"></div>
  <div id="box" :style="styleObj"></div>//传入字面量
  styleObj:{
                border:"2px solid green"
            },