vue入门系列之绑定class和style

绑定class和style

• vue中绑定class和style，其实就是用v-bind指令
• 但是针对class和style，vue做了增强，在这两个特性使用v-bind的时候可以表达式的结果，除了字符串，还可以是对象和数组。
• 具体看以下例子

class例子

• 模版

    <!--对象形式-->
    <div v-bind:class="{ active: isActive }"></div>
    <div
      class="static"
      v-bind:class="{ active: isActive, 'text-danger':  hasError }"
    ></div>
    <!--绑定的数据对象也可以不在模版里面，可以写在js中data里面-->
    <div v-bind:class="classObject"></div>
    <!--也可以写在计算属性里面-->
    <div v-bind:class="classObject1"></div>

    <!--数组形式-->
    <div v-bind:class="[activeClass, errorClass]"></div>
    <!--也可以写三元运算符-->
    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    <!--也可以在数组语法中使用对象形式-->
    <div v-bind:class="[{ active: isActive }, errorClass]"></div>

• js数据

    data: {
      isActive: true,
      hasError: false,
      classObject: {
        active: true,
        'text-danger': false
      },
      error: null,
      activeClass: 'active',
      errorClass: 'text-danger'
    }
    computed: {
      classObject1: function () {
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }

• 结果渲染

    <!--对象形式-->
    <div class="active"></div>
    <div class="static active"></div>
    <!--数据对象没有放在模板里面-->
    <div class="active"></div>
    <!--写在计算属性里面-->
    <div class="active"></div>

    <!--数组形式-->
    <div class="active, text-danger"></div>
    <!--三元运算符-->
    <div class="active, text-danger"></div>
    <!--数组语法中使用对象形式-->
    <div class="active, text-danger"></div>

style例子

• v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
• 自动添加前缀
  • 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀
• 多重值
  • 从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值
  • 这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。
• 模板

    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    <!--直接绑定到一个样式对象通常更好，这会让模板更清晰-->
    <div v-bind:style="styleObject"></div>
    <!--数组语法，数组中的每个元素都是一个js对象-->
    <div v-bind:style="[baseStyles, overridingStyles]"></div>
    <!--多重值-->
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

• js数据

    data: {
      activeColor: 'red',
      fontSize: 30,
      styleObject: {
        color: 'red',
        fontSize: '13px'
      },
      baseStyles: {
        color: 'black'
      },
      overridingStyles: {
        fontSize: '20xp'
      }
    }

- 渲染结果

    <div style="color: red; font-size: 30xp"></div>
    <!--直接绑定到一个样式对象通常更好，这会让模板更清晰-->
    <div style="color: red; font-size: 13xp"></div>
    <!--数组语法-->
    <div style="color: black; font-size: 20xp"></div>
    <!--多重值， 如果浏览器支持不带浏览器前缀的 flexbox-->
    <div style="display: flex"></div>