vue 动态style

<template>
  <div :style="dynamicStyles">
    我是一个带有动态样式的 div
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 定义一个对象，包含动态样式属性
      dynamicStyles: {
        color: 'red',
        fontSize: '20px',
        backgroundColor: 'lightblue'
      }
    };
  },
  methods: {
    // 可以通过方法来动态改变样式
    changeStyle() {
      this.dynamicStyles.color = 'blue';
      this.dynamicStyles.fontSize = '24px';
      this.dynamicStyles.backgroundColor = 'lightgreen';
    }
  }
};
</script>

<style scoped>
/* 这里可以添加一些静态样式 */
</style>

解释说明：

1. <div :style="dynamicStyles">：使用 :style 绑定一个 JavaScript 对象 dynamicStyles，该对象包含了所有需要动态应用的 CSS 样式。
2. data()：在组件的 data 函数中定义了 dynamicStyles 对象，它包含了初始的样式属性和值。
3. methods：可以通过定义的方法（如 changeStyle）来动态修改 dynamicStyles 对象中的属性，从而实现样式的动态变化。