vue 绑定到style

Vue 可以通过绑定 `style` 属性来动态修改元素的样式。在绑定 `style` 属性时，可以使用对象语法或数组语法。

1. 对象语法

在 Vue 组件中，可以使用对象语法来绑定 `style` 属性，如下所示：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">Hello, world!</div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'red',
      fontSize: 16
    }
  }
}
</script>

上面的代码中，`:style` 属性绑定了一个对象，该对象包含两个属性：`color` 和 `fontSize`。这两个属性的值都是从组件的 `data` 中取得的。注意，`fontSize` 的值需要加上 `'px'` 单位。

2. 数组语法

除了对象语法以外，Vue 还可以使用数组语法来绑定 `style` 属性。数组语法中可以包含多个对象，每个对象都可以设置不同的样式，如下所示：

<template>
  <div :style="[style1, style2]">Hello, world!</div>
</template>

<script>
export default {
  data() {
    return {
      style1: {
        color: 'red',
        fontSize: '16px'
      },
      style2: {
        backgroundColor: 'green'
      }
    }
  }
}
</script>

上面的代码中，`:style` 属性绑定了一个包含两个对象的数组。第一个对象设置了 `color` 和 `fontSize` 样式，第二个对象设置了 `backgroundColor` 样式。