vue怎么写动态行内样式

在 Vue 中，可以使用 `v-bind:style` 或者简写的 `:style` 指令来设置动态行内样式。这个指令接受一个 JavaScript 对象作为参数，对象的属性表示样式属性，属性值表示样式属性的值。

例如，假设我们有一个变量 `color`，它的值是一个字符串，我们想要将一个 `<div>` 元素的背景颜色设置为该变量的值，可以这样写：

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

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

这里的 `backgroundColor` 属性表示背景颜色，它的值是 `color` 变量的值。当 `color` 变量的值发生变化时，该 `<div>` 元素的背景颜色也会相应地发生变化。

除了使用对象来设置样式，还可以使用数组，数组中可以包含多个对象，每个对象代表一个样式属性。例如：

<template>
  <div :style="[styleObject1, styleObject2]">Hello World</div>
</template>

<script>
export default {
  data() {
    return {
      styleObject1: { backgroundColor: 'red' },
      styleObject2: { color: 'white' }
    }
  }
}
</script>

这里的 `styleObject1` 和 `styleObject2` 都是 JavaScript 对象，它们分别代表背景颜色和文字颜色。使用数组将两个对象合并起来，可以将它们应用到同一个元素上。