vue3 动态style

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

<script>
export default {
  data() {
    return {
      // 定义一个对象，用于存储动态样式
      dynamicStyles: {
        color: 'blue',
        fontSize: '20px',
        backgroundColor: 'lightgray'
      }
    };
  },
  methods: {
    // 可以通过方法来动态修改样式
    changeStyle() {
      this.dynamicStyles.color = 'red';
      this.dynamicStyles.fontSize = '24px';
      this.dynamicStyles.backgroundColor = 'lightgreen';
    }
  },
  mounted() {
    // 模拟在组件挂载后改变样式
    setTimeout(() => {
      this.changeStyle();
    }, 2000);
  }
};
</script>

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

解释说明：

1. 模板部分 (<template>)：

   • 使用了 v-bind:style（简写为 :style）来绑定 dynamicStyles 对象到 div 元素的 style 属性。这意味着 div 的样式会根据 dynamicStyles 的值动态变化。

2. 脚本部分 (<script>)：

   • 在 data 函数中定义了一个 dynamicStyles 对象，里面包含了一些初始的样式属性。
   • methods 中定义了一个 changeStyle 方法，该方法可以用来动态修改 dynamicStyles 的值。
   • 在 mounted 生命周期钩子中，使用 setTimeout 模拟在组件挂载后 2 秒钟改变样式。

3. 样式部分 (<style scoped>)：

   • 这里可以添加一些静态样式，但在这个例子中没有具体使用。

这个示例展示了如何在 Vue 3 中使用动态样式，并且可以通过 JavaScript 动态地修改这些样式。