是否可以将内联样式与 vue.js 绑定？

Question

我很好奇，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>

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

Answer 1

当然，这里描述的是可能的：https : //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>

Answer 2

是的，有可能请阅读文档

注意：为了更好的调试computed，请使用,methods而不是内联

<template>
  <div>
    <h1 :style="styleObject"> Text </h1>
    <button @click='toggleCondition'>Click me</button>
  </div>
</template>

<script>

export default {
  data() {
    return {
      condition: false,
    };
  },
  computed: {
    styleObject() {
      return this.condition ? { background: 'red' } : {};
    },
  },
  methods: {
    toggleCondition() {
      this.condition = !this.condition;
    },
  },
};

</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>