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 {
      color: 'blue',
      fontSize: 20
    };
  },
  computed: {
    computedStyles() {
      return {
        color: this.color,
        fontSize: this.fontSize + 'px'
      };
    }
  },
  methods: {
    changeColor(newColor) {
      this.color = newColor; // 确保使用响应式方法更新数据
    }
  }
};
</script>