vue 綁定 添加class 屬性 4種方法 添加style 3中方法 v-bind /：

一、添加class
<style>
    .red{color: skyblue;}
    .thin{font-weight: 200;}
    .italic{font-style: italic;}
    .active{letter-spacing: 0.5em}
</style>

1.第一種使用方式，直接傳遞一個數組，注意的 class需要使用  v-bind 做數據綁定
eg:
<h1 :class="['italic','red'">H1標簽！！！</h1>
2.在數組中使用三元表達式
eg:
<h1 :class="['italic','red',flag?'active':'']">H1標簽！！！</h1>
3.在數組中使用 對象來代替三元表達式，提高代碼的可讀性
<h1 :class="['italic','red',{'active':flag}]">H1標簽！！！</h1>
4.在為class使用v-bind 綁定 對象的時候，對象的屬性是類名，由於對象的額屬性可帶引號，也可以不帶引號；屬性的值是一個標識符
(1).<h1 :class="{'red':true,thin:true,italic:true,active:true}">H1標簽！！！</h1>
(2).<h1 :class="classObj">H1標簽！！！</h1>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'點擊事件',
            flag:false,
            classObj:{red:true,thin:true,italic:true,active:true}
        },
        methods:{
           
        }
    });
</script>


二、添加style

1.直接在元素上通過:style的形式，書寫樣式對象
<h1 :style="{color:'red','font-size':'40px'}">h1標簽</h1>
2.將樣式對象定義到data中，並直接引用到：style
<h1 :style="styleobj">h1標簽</h1>
3.在：style中通過數組，引用多個data上的樣式對象
<h1 :style="[styleobj,styleobj2]">h1標簽</h1>

<script>
    //創建Vue實例
    var vm = new Vue({
        el:'#app',
        data:{
            styleobj:{color:'red','font-weight':200},
            styleobj2:{'font-style':'italic'}
        },
        methods:{}
    })
</script>