Vue 绑定class与style属性

• Vue

适用范围:

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

梗概:

当绑定class或style属性时

1. 表达式结果的类型除了字符串之外，还可以是对象或数组。
2. 在组件外面可以为组件里面的标签添加类
3. 绑定style相当于添加内联style

对象语法:

1. 绑定class

你可以在对象中传入更多字段来动态切换多个 class。此外，:class 指令也可以与普通的 class attribute 共存。 当有如下模板：

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

和如下 data：

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

渲染的结果为：

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

绑定的数据对象不必内联定义在模板里：

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

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

2. 绑定style

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

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

1. 数组语法:

1. 绑定class:

传入一个数组, 数组的每一个元素都将作为一个类

2. 绑定style:

传入一个数组, 元素为对象, 多个对象内的样式将会叠加

1. 为组件内标签添加类:

1. 实例:

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>