Class与Style如何动态绑定？

Class可以通过对象语法和数组语法进行动态绑定：

1. 对象语法：

                <div v-bind:class="{active:isActive,'text-danger':hasError}"></div>

                data:{

                        isActive:true,

                        hasError:false

                }

        

        2. 数组语法：

                

                

                <div v-bind:class="[isActive ? activeClass : '' , errorClass ]"></div>

                data:{

                        activeClass : 'active',

                        errorClass : 'text-danger'

                }

        3. Style也可以通过对象语法和数组语法进行动态绑定：

                对象语法:                                

                          <div v-bind:style="{color : activeColor , fontSize : fontSize + 'px'}"></div>

                                data:{

                                        activeColor : 'red',

                                        fontSize : 30

                                }

                数组语法：

                        <div v-bind:style="[styleColor, styleSize]"></div>

                        data: {

                                styleColor: {

                                         color:"red"      
                                 },

                                 styleSize: {

                                          fontSize : 30
                                 },

                        }