Javascript 是否可以将内联样式与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>

正文
点击我
导出默认值{
数据（）{
返回{
条件：假
}
}
}

---

在上面的示例中，当条件变为真时，我想更改元素的背景。

当然可以，如下所述：

正文
点击我
导出默认值{
数据（）{
返回{
条件：假，
activeColor:'白色'，
字体大小：12
}
}
}

是的，有可能，请通过

注意：请使用

计算方法

，

方法

而不是内联方法，以便更好地调试

正文
点击我
导出默认值{
数据（）{
返回{
条件：假，
};
},
计算：{
styleObject（）{
返回此条件？{background:'red'}:{}；
},
},
方法：{
切换条件（）{
this.condition=！this.condition；
},
},
};

---

Tnx，我对vue还是有点陌生，所以没有阅读所有文档，需要快速阅读。你和托马斯对我说得很清楚！

<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>