五、Vue学习 Class 和 Style 绑定

官方参考网址

一、绑定HTML Class

1.1 对象语法

1.1.1 基础

<div :class="{ active: isActive }"></div>

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

data() {
  return {
    isActive: true,
    hasError: false
  }
}

1.1.2 不必内联定义在模板里

<div :class="classObject"></div>

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

1.1.3 绑定 返回的 计算属性

<div :class="classObject"></div>

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

1.2 数组语法

1.2.1 基础

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

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

1.2.2 三元表达式

<div :class="[isActive ? activeClass : '', errorClass]"></div>

1.3 组件上使用

如上的方法在组件上一样适用
而且：

const app = Vue.createApp({})

app.component('my-component', {
  template: `<p class="foo bar">Hi!</p>`
})

<div id="app">
  <my-component class="baz boo"></my-component>
</div>

//渲染的结果：
<p class="foo bar baz boo">Hi</p>

二、绑定内联样式

2.1 对象语法

2.1.1 基础

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

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

2.1.2 样式对象

<div :style="styleObject"></div>

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

2.2 数组语法

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