class列表和内联样式style都是属性，所以可以使用v-bind动态绑定 v-bind:class="{ 表达式 }" 表达式的结果可以是字符串、对象和数组。

v-bind

v-bind绑定class

<div id="app">
    <!--给v-bind:class设置一个对象，可以动态地切换class-->
    <!--当isTrue的取值为真时，<div>就具有active这个属性；取值为假时，就不具有。-->
    <div v-bind:class="{active:isTrue,others:isFalse}">可以看得见1</div>
    
    <!-- v-bind:class指令可以与普通的class属性共存-->
    <div v-bind:class="{active:isTrue}" class="own">可以看得见2</div>

    <!-- v-bind:class指令可以直接绑定数据中的对象-->
    <div v-bind:class="classObject">可以看得见3</div>

    <!--给v-bind:class传递一个数组，以拥有一个class列表-->
    <!--注意写法-->
    <div v-bind:class="[classOne,classTwo]">数组语法</div>
    <div v-bind:class="[{active:isTrue},classTwo]">数组语法2</div>
</div>

<script>
    var t=new Vue({
        el:"#app",
        data:{
            isTrue:true,
            isFalse:false,
            classOne:"first",
            classTwo:"second",
            classObject:{
                class1:true,
                class2:true,
        }
        }
    })
</script>

v-bind绑定style

<div id="app">
    <!--给v-bind:style设置一个对象，可以动态地切换样式。-->
    <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>

    <!--一般直接绑定一个样式对象，从而简明易懂-->
    <div v-bind:style="styleObject">对象语法2</div>

    <!--给v-bind:style传递一个数组，让这个元素拥有多个样式-->
    <div v-bind:style="[firstStyle,secondStyle]">数组语法</div>
</div>

<script>
    var s=new Vue({
        el:"#app",
        data:{
            activeColor:"red",
            activeSize:"25px",
            styleObject:{
                color:"blue",
                fontSize:"25px",
            },
            firstStyle:{
                color:"orange",
            },
            secondStyle:{
                fontSize:"25px",
            }
        }
    })
</script>