vue动态绑定style

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

<script>
export default {
  data() {
    return {
      // 定义一个对象，包含动态样式属性
      dynamicStyle: {
        color: 'blue', // 文字颜色为蓝色
        fontSize: '20px', // 字体大小为20px
        backgroundColor: 'lightgray' // 背景颜色为浅灰色
      }
    };
  },
  methods: {
    // 可以通过方法动态修改样式
    changeStyle() {
      this.dynamicStyle.color = 'red'; // 修改文字颜色为红色
      this.dynamicStyle.fontSize = '24px'; // 修改字体大小为24px
      this.dynamicStyle.backgroundColor = 'lightgreen'; // 修改背景颜色为浅绿色
    }
  }
};
</script>

<style scoped>
/* 这里可以添加一些额外的样式 */
</style>

解释说明：

• :style="dynamicStyle"：使用 Vue 的绑定语法 (:) 来动态绑定 style 属性。dynamicStyle 是一个对象，包含了多个 CSS 样式属性。
• data()：在组件的 data 函数中定义了 dynamicStyle 对象，里面包含了初始的样式属性。
• methods：可以通过定义的方法（如 changeStyle）来动态修改 dynamicStyle 对象中的属性值，从而实现样式的动态变化。

你可以根据需要调用 changeStyle 方法来改变样式，例如通过按钮点击事件等。