操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

    1. <div id="app">    
    2. //绑定class
    3.   <!--对象class :class是v-bind:class的缩写 :style是v-bind:style的缩写-->
    4.   <div :class="{'success':isSuccess,'fail':isFail}">对象绑定class</div>　　
    5.   <div :class="classes">计算属性绑定class</div>
    6.   <!--数组class -->
    7.     <div :class="[successCls,failCls]">直接绑定多个class属性</div>　　
    8.     <div :class="[{'success':isSuccess},failCls]">动态的判断添加那些class属性，是最常用的</div>
    9.     <button :class= "classesBtn">计算属性绑定</button>
    10. //绑定内联样式 
    11.     <div :style="{'color':color,'fontSize':fontSize+'px'}">文本</div>
    12.   <div :style="style">文本，是最常用的</div>
    13. </div>
    14. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    15. <script type="text/javascript">
    16. var vm = new Vue({
    17.     el : "#app",
    18.     data : {
    19.         //绑定class
    20.     successCls: 'success',
    21.     failCls: 'fail',
    22.     isSuccess: true,
    23.     isFail: false,
    24.     error: false,
    25.     size : 'large',
    26.     disabled : true,
    27.     //绑定内联样式
    28.     color: 'red',
    29.     fontSize: 14,
    30.     style: {
    31.        color: 'red',
    32.        fontSize: 14
    33.      }
    34.     },
    35.    computed: {
    36.         classes: function(){
    37.             return {
    38.                 success: this.isSuccess && !this.error,
    39.                 fail: this.isFail || !this.error
    40.             }
    41.         },
    42.              classesBtn:function(){
    43.                 return [
    44.                 'btn',
    45.                 {
    46.                     ['btn-'+this.size]: this.size,
    47.                     ["btn-disabled"]: this.disabled
    48.                 }
    49.             ]
    50.         }
    51.     }
    52. });
    53. </script>
    54. <style>
    55. .success{color:#00FF00;}
    56. .fail{background:#FF0000;}
    57. </style>