目录

• 样式绑定🍡
  • class
  • style

样式绑定

Class的绑定

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

<!--模板-->
<div class="static"
     :class="{ active: isActive, 'text-danger': hasError }">
</div>

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

<!--渲染结果-->
<div class="static active"></div>

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

<!--模板-->
<div class="static" :class="classObject"></div>

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

<!--渲染结果-->
<div class="static active"></div>

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

<!--模板-->
<div class="static" :class="classObject"></div>

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

<!--渲染结果-->
<div class="static active"></div>

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

<!--模板-->
<div class="static" :class="[activeClass, errorClass]"></div>

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

<!--渲染结果-->
<div class="static active text-danger"></div>

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

<!--模板-->
<div class="static" :class="[isActive ? activeClass : '', errorClass]"></div>

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

<!--渲染结果-->
<div class="static active text-danger"></div>

Style的绑定

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

<!--模板-->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

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

<!--渲染结果-->
<div style="color:'red',fontSize:30px;"></div>

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

<!--模板-->
<div :style="styleObject"></div>

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

<!--渲染结果-->
<div style="color:'red';fontSize:13px;"></div>

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

<!--模板-->
<div :style="styleObject"></div>

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

<!--渲染结果-->
<div style="color:'red';fontSize:13px;"></div>

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

<!--模板-->
<div :style="[baseStyles, overridingStyles]"></div>

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

<!--渲染结果-->
<div style="color:'red';fontSize:20px;"></div>

自动前缀

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