vue动态style传递

在 Vue 中，可以使用动态绑定 `:style` 来传递样式。

例如，假设我们要根据某个变量 `color` 来动态设置 `div` 元素的背景色，可以这样写：

<template>
  <div :style="{ backgroundColor: color }">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red'
    }
  }
}
</script>

在上面的代码中，我们使用了 `:style` 绑定并传递了一个对象，对象中的属性名是 CSS 样式名称，属性值是对应的变量名。可以根据需要传递多个样式属性，每个属性之间用逗号隔开即可。

如果我们想根据多个变量来设置样式，也可以使用计算属性来实现。

例如，我们可以根据 `color` 和 `size` 两个变量来动态设置 `div` 元素的样式：

<template>
  <div :style="computedStyle">Hello, World!</div>
</template>

<script>
export default {
  data() {
    return {
      color: 'red',
      size: '20px'
    }
  },
  computed: {
    computedStyle() {
      return {
        backgroundColor: this.color,
        fontSize: this.size
      }
    }
  }
}
</script>

在上面的代码中，我们使用了计算属性 `computedStyle` 来动态计算样式对象，然后将其绑定到 `div` 元素的 `:style` 上。这样做可以使代码更加清晰和易于维护。