十五、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>