Loading

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>
    
posted @ 2020-11-18 00:49  澎湃_L  阅读(84)  评论(0编辑  收藏  举报