十五、css樣式class的多種用法

1、操作HTML元素的class列表和內聯樣式是數據綁定的一個常見需求。

2、所以Vue可以通過用v-bind處理它們：只需要通過表達式計算出字符串結果即可。不過，字符串拼接麻煩且易錯。

       因此，在將v-bind用於class和style時，Vue做了專門的增強。

3、表達式結果的類型除了字符串之外，還可以是對象或數組。

    （1）表達式結果的類型是對象

             1>對象語法：<div :class="{active:true}">class樣式</div>

             2>可以在對象中傳入更多字段，來動態切換多個class。

             3>v-bind:class指令，也可以與普通的class屬性共存。<div :class="{active:true,'my-box':isBox}">class樣式<div>

             4>綁定的數據對象不必內聯定義在模板里，在data方法里面定義一個對象也可以。

             5>也可以在這里綁定一個返回對象的computed計算屬性，這是一個常用且強大的模式。<div :class="objClassComp">class樣式<div>

               (注意：objClassComp是一個方法名而不是對象名。它是Vue實例的computed計算屬性下的一個方法，必須有返回值,在這里返回值必須是對象)。

               (推薦這種寫法)

   （2）表達式結果的類型是數組

             1>數組語法：<div :class="[activeClss,myBox]">class樣式</div>

             2>根據條件切換列表中的class，可以用三元表達式。<div :class="[isActive?activeClass:'', myBox]">class樣式</div>

             3>在數組語法中也可以使用對象語法。<div :class="[{activeClass:true},myBox]">class樣式</div>

<style>
    .active{
        color: brown;
    }
    .divBox{
        width: 100px;
        height: 100px;
        background-color: chartreuse;
    }
   .div-font{
        font-size: large;
   }
</style>
<template v-if='false'><!--2(5)綁定一個 返回對象 的computed計算屬性，這是一個常用且強大的模式。（推薦這種寫法）-->
     <div :class='objClassComp'>css樣式class的多種用法</div>
</template>
<script>
    let data={
        isActive:true,
        isDivBox:true     
    };
    computed:{
        objClassComp(){//2(5)、綁定一個返回對象的computed計算屬性，這是一個常用且強大的模式。
            return{
                'active':this.isActive,//注意通過改變data數據，可以實現動態改變class樣式 'divBox':this.isDivBox,
                'div-font':true
            }
        }
    }
</script>