vue 动态style

Vue.js 中可以使用动态绑定实现动态样式。有两种方法可以实现动态样式：

1. 对象语法：可以通过在模板中使用对象语法来绑定样式。在 data 或计算属性中定义一个对象，然后将它绑定到元素的 style 属性上。对象的 key 是 CSS 属性名，value 是对应的样式值。

例如，假设我们有一个 data 属性 `color`，它的值为 `red`，我们可以这样绑定动态样式：

<div :style="{ color: color }">这是一个动态样式文本</div>

当 `color` 的值为 `red` 时，文本的颜色会变为红色。

2. 数组语法：可以使用数组语法来同时应用多个样式对象。在 data 或计算属性中定义多个对象，并将它们放入一个数组中，然后将该数组绑定到元素的 style 属性上。

例如，假设我们有两个计算属性 `styleObject1` 和 `styleObject2`，我们可以这样绑定动态样式：

<div :style="[styleObject1, styleObject2]">这是一个动态样式文本</div>

这样会同时应用 `styleObject1` 和 `styleObject2` 中定义的样式。

通过这两种方法，你可以根据需要动态地修改元素的样式。