1.通过对象绑定

<div :class="{ status1: item.state=='空闲' , status2: item.state=='拥挤' }"></div>

data() {

       return {

                 item：{ state: '空闲' }

        }

}

// 当state为‘空闲’时绑定status1类名，为‘拥挤’时绑定status2类名

2.通过数组绑定

 <div :class=" [ item.state1, item.state2 ]"></div>

data() {

       return {

                 item：{ state1: 'active'，state2: 'active-color' }

        }

}

// 给div同时绑定了active、active-color两个类名

3.通过表达式绑定

 <div :class=" item.state=='空闲' ? 'status1':'status2' "></div>

data() {

       return {

                 item：{ state: '空闲' }

        }

}

4.通过计算属性绑定

<div v-for="(item, index) in infoArr" :key="index">

        <span :class="getClassName(item.state)">{{ item.name }}</span>

</div> 

data() {

       return {

                 infoArr : [{state:' 空闲 ' ，name: ' 状态1 '},  {state: ' 拥挤 '，name: ' 状态2 '}]

        }

}

computed:{

        getClassName(){

                return function(val) {

                        return val == '空闲' ？'state1' : 'state2'

                }

        }

}

动态绑定style和绑定class同理