vue的style中使用变量

在Vue中，你可以使用数据对象中的变量来设置样式。例如：

<template>
  <div v-bind:style="{ color: fontColor }">This is a message.</div>
</template>

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

在上面的示例中，使用数据对象中的fontColor变量来设置文字颜色。你可以根据自己的需求来调整变量和样式。如果你需要在样式中使用多个变量，可以在计算属性中进行复杂的计算，并返回一个样式对象。例如：

<template>
  <div v-bind:style="computedStyle">This is a message.</div>
</template>

<script>
export default {
  data() {
    return {
      fontColor: 'red',
      fontSize: 16
    }
  },
  computed: {
    computedStyle() {
      return {
        color: this.fontColor,
        fontSize: `${this.fontSize}px`
      }
    }
  }
}
</script>

在上面的示例中，使用计算属性computedStyle来计算样式对象。在computedStyle方法中使用了数据对象中的fontColor和fontSize属性来设置颜色和字体大小。你也可以在计算属性中使用其他的计算方法来计算样式值。