vue基础复习-课时05

目录

• 样式绑定
  • class
  • style

样式绑定

Class的绑定

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

//数据
data: {
  isActive: true,
  hasError: false
}

对象语法--写在数据属性里

//数据
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

对象语法--写在计算属性里

//数据
data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

数组语法--内联定义在模板里

//数据
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

三元表达--内联定义在模板里

//数据
data: {
  isActive:true,
  activeClass: 'active',
  errorClass: 'text-danger'
}

Style的绑定

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

//数据
data: {
  activeColor: 'red',
  fontSize: 30
}

对象语法--写在数据属性里

//数据
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

对象语法--写在计算属性里

//数据
computed: {
  styleObject: function () {
    return {
    color: 'red',
    fontSize: '13px'
  }
  }
}

数组语法--写在数据属性里

//数据
data: {
  baseStyles: {
    color: 'red',
    fontSize: '13px'
  }
  overridingStyles: {
    fontSize: '20px'
  }
}

自动前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。