Vue3中:style="{ color }"样式绑定原理咨询

核心语法拆解 #

• :style的绑定规则
  Vue的:style（v-bind:style的简写）指令用于动态绑定行内样式，它要求绑定的值必须是CSS键值对组成的对象，或是包含多个此类对象的数组。
• { color }的本质
  这是ES6的对象属性简写语法，当对象的属性名与变量名完全相同时，可省略冒号和重复的变量名。所以{ color }等价于：

{ color: color }

这里第一个color是CSS样式属性（控制文本颜色），第二个color是你用ref声明的响应式变量（值为'green'或'blue'）。

为什么去掉{}无效？ #

如果直接写:style="color"，相当于把字符串类型的'green'/'blue'传给:style，但:style不接受纯字符串作为有效值——它需要明确的键值对来映射CSS属性与对应的值，因此这种写法无法被Vue正确解析，自然不会生效。

实际运行逻辑 #

点击元素触发toggleColor函数时，color变量的值在'green'和'blue'间切换，Vue会自动响应这个变化，将更新后的{ color: 新值 }对象应用到<p>元素的行内样式上，实现文本颜色的切换。

内容的提问来源于stack exchange，提问作者urnotdyyyy