vue3 div 动态 修改style 中的属性值

在Vue3中动态修改div的style属性的值非常简单。首先，我们需要在div中使用v-bind指令来绑定动态的style属性，如下所示：

<div :style="{ backgroundColor: bgColor, color: fontColor }">
  这是一个动态样式的div
</div>

在这个例子中，我们使用了bgColor和fontColor两个变量作为背景颜色和字体颜色的属性值。这些变量可以从Vue实例的数据中获取或者在组件的props中传递进来。

当我们需要动态地修改这些属性值时，只需要在Vue实例中更新这些变量的值即可。比如：

export default {
  data() {
    return {
      bgColor: 'red',
      fontColor: 'white'
    }
  },

  methods: {
    changeColor() {
      // 动态修改背景颜色和字体颜色
      this.bgColor = 'blue';
      this.fontColor = 'black';
    }
  }
}

在这个例子中，我们给Vue实例添加了一个changeColor方法，通过修改bgColor和fontColor变量的值来动态修改div的背景颜色和字体颜色。

通过这种方式，我们就可以很容易地动态修改任何一个div的style属性中的属性值了。