vue动态绑定样式style

Vue动态绑定样式可以使用`v-bind:style`或简写`:style`指令。它可以将一个对象或返回一个对象的计算属性绑定到元素的样式上。

以下是一个例子：

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

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

在这个例子中，我们使用`:style`指令将一个对象绑定到`div`元素。这个对象有两个属性：`color`和`fontSize`。它们的值是从组件的`data`中获取的，这些值可以动态地更改。

注意，当绑定样式时，属性名应该使用驼峰命名法，例如`fontSize`，而不是`font-size`。在绑定属性值时，需要将像素值转换为字符串，并添加单位“px”。在上面的例子中，`fontSize`属性的值为`16`，但是在样式绑定中，我们将其转换为`'16px'`。