vue js 绑定style

<template>
  <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">
    Hello, Vue!
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeColor: 'red',
      fontSize: 30
    };
  }
};
</script>

<template>
  <div :style="[baseStyles, overridingStyles]">
    Hello, Vue!
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStyles: {
        color: 'blue',
        fontSize: '20px'
      },
      overridingStyles: {
        color: 'green'
      }
    };
  }
};
</script>

<template>
  <div :style="computedStyles">
    Hello, Vue!
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: true
    };
  },
  computed: {
    computedStyles() {
      return {
        color: this.isActive ? 'red' : 'blue',
        fontSize: '24px'
      };
    }
  }
};
</script>