vue style 动态

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

<script>
export default {
  data() {
    return {
      // 定义一个对象，用于存储动态样式
      dynamicStyle: {
        color: 'red',
        fontSize: '20px',
        backgroundColor: 'yellow'
      }
    };
  },
  methods: {
    // 可以通过方法来修改动态样式
    changeStyle() {
      this.dynamicStyle.color = 'blue';
      this.dynamicStyle.fontSize = '24px';
      this.dynamicStyle.backgroundColor = 'lightgreen';
    }
  }
};
</script>

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

解释说明：

• :style="dynamicStyle"：使用 Vue 的绑定语法 (v-bind) 来动态绑定 style 属性。dynamicStyle 是一个对象，里面包含了需要动态应用的 CSS 样式。
• data()：在组件的数据选项中定义了 dynamicStyle 对象，该对象包含了一些初始的样式属性。
• methods：提供了 changeStyle 方法，可以通过调用该方法来修改 dynamicStyle 对象中的样式属性，从而实现样式的动态变化。

你可以根据需要在不同的地方调用 changeStyle 方法，例如通过按钮点击事件等，来动态改变元素的样式。