vue.js 可以绑定内联样式吗？

我很好奇，Vue.js 中是否可以绑定内联样式？我熟悉类绑定，但是如果有时由于某种原因您想要内联绑定样式语句，是否可以像对待类一样绑定它？

例如：

<template>
  <div>
      <h1 :style="{('background:red') : condition}"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      condition: false,
    };
  },
};
</script>

在上面的示例中，我想在条件成立时更改元素的背景。

当然这是可能的，如下所述：https://v2.vuejs.org/v2/guide/class-and-style.html https://v2.vuejs.org/v2/guide/class-and-style.html

<template>
  <div>
      <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1>
      <button @click='condition = true'>Click me</button>
  </div>
</template>

<script> 
export default {
  data() {
    return {
      condition: false,
      activeColor: 'white',
      fontSize: 12,
    };
  },
};
</script>