VUE3 setup语法糖绑定style变量改变属性值

在Vue 3中，你可以使用setup函数配合reactive来创建响应式的style对象，并在模板中绑定到元素的style属性。以下是一个简单的例子：

<template>
  <div :style="styleObj">这是一个带有样式的div</div>
  <button @click="changeColor">改变颜色</button>
</template>
 
<script>
import { reactive, toRefs } from 'vue';
 
export default {
  setup() {
    // 创建响应式的style对象
    const style = reactive({
      color: 'red',
      fontSize: '20px'
    });
 
    // 更改样式的函数
    function changeColor() {
      style.color = style.color === 'red' ? 'blue' : 'red';
    }
 
    // 返回响应式对象，在模板中可以直接访问
    return {
      ...toRefs(style),
      changeColor
    };
  }
};
</script>

在这个例子中，我们创建了一个响应式的style对象，其中包含color和fontSize两个属性。我们还定义了一个函数changeColor来改变这些属性的值，从而动态更新元素的样式。在模板中，我们使用:style绑定了styleObj对象，这样当styleObj中的属性变化时，对应的样式也会更新。