vue动态绑定类名

1.通过对象绑定

data() {

       return {

                 item：{ state: '空闲' }

        }

}

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

2.通过数组绑定

 

data() {

       return {

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

        }

}

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

3.通过表达式绑定

 

data() {

       return {

                 item：{ state: '空闲' }

        }

}

4.通过计算属性绑定

        {{ item.name }}

 

data() {

       return {

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

        }

}

computed:{

        getClassName(){

                return function(val) {

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

                }

        }

}

动态绑定style和绑定class同理