vue入门系列之绑定class和style

绑定class和style

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

class例子

• 模版

• 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'
        }
      }
    }

• 结果渲染

style例子

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

• js数据

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

- 渲染结果