vue绑定样式

1. 绑定class

   • 对象语法：对象内联定义在模板里

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

   • 对象语法：直接返回一个对象（计算属性）

     <div v-bind:class="classObject"></div>
     <script>
        data: {
           isActive: true,
           error: null
        },
        computed: {
          classObject: function () {
            return {
              active: this.isActive && !this.error,
              text-danger': this.error && this.error.type === 'fatal'
            }
          }
      }
     </script>
     

   • 数组语法：对应一个class列表

     <div v-bind:class="[{ active: isActive }, errorClass]"></div>
     <script>
       data: {
          isActive: true,
          errorClass: 'text-danger'
       }
     </script>
     

2. 绑定style

   • 对象语法：用驼峰式或短横线分隔 (记得用引号括起来)

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

   • 对象语法：直接绑定到一个样式对象

     <div v-bind:style="styleObject"></div>
     <script>
        styleObject: {
            color: 'red',
            fontSize: '13px'
         }
     </script>
     

   • 数组语法：将多个样式对象应用到同一个元素上

     <div v-bind:style="[baseStyles, overridingStyles]"></div>
     

3. 多重值：包含多个值的数组，常用于提供多个带前缀的值

   <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>