小白学习 Vue 3.绑定 Class 与 Style

小白学习 Vue 系列目录

• 小白学习 Vue 1.介绍
• 小白学习 Vue 2.指令
• 小白学习 Vue 3.绑定 Class 与 Style
• 小白学习 Vue 4.条件渲染和列表渲染
  

Class

• 对象语法

  渲染：

  <div
    class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  

  数据：

  data: {
    isActive: true,
    hasError: false
  }
  

  结果：

  <div class="static active"></div>
  

总结：对象内部的键值对，键代表 className，而值代表该 className 是否启用。 此外，表达式中的对象也可以放在 data 或者 computed 中。

• 数组语法

  渲染：

  <div v-bind:class="[activeClass, errorClass]"></div>
  

  数据：

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

  结果：

  <div class="active text-danger"></div>
  

总结：数组内部的元素，就是每一个 className，也可以在该数组内部定义三元表达式来决定是否启用。 此外，如果是自定义组件内部和外部都有 className，这些 className 不会被覆盖而会共存。

Style

对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div v-bind:style="styleObject"></div>

数组语法：

<div v-bind:style="[baseStyles, overridingStyles]"></div>