v-bind:style修改width属性原理及代码失效问题排查

嘿，我来帮你搞定这两个问题～

一、v-bind:style是怎么修改width属性的？ #

v-bind:style（也可以简写为:style）是Vue专门用来动态绑定内联样式的指令，它的工作逻辑其实很直白：

• 你传入一个样式对象（比如{width: 你的值}），Vue会把这个对象里的键值对解析成对应的CSS样式规则
• 当绑定的width值变化时，Vue会自动更新元素的style.width DOM属性，相当于原生JS里的element.style.width = 新值，而且是响应式的——数据变，样式就跟着变

简单说就是帮你把数据和元素的内联样式做了绑定，省去了手动操作DOM的麻烦。

二、你的代码无法设置width的问题排查和修复 #

先看你贴的代码：

{{questionOption.label}}{{questionOption.visualBox.width}}

数据能正常显示，说明questionOption.visualBox.width的取值是没问题的，问题出在CSS的width属性必须带单位！

如果你的questionOption.visualBox.width只是纯数字（比如150），浏览器根本不知道这是150px还是150%，自然不会生效。

给你两个修复方案：

• 方案一：在数据源里直接给width加上单位，比如把值设置成"150px"或者"70%"，这样绑定后浏览器就能直接识别
• 方案二：在绑定的时候动态拼接单位，修改:style的写法（用模板字符串拼接）：

<div v-for="(questionOption, index) in questionOptions" 
     :key="index" 
     class="annotation" 
     :style="{width: `${questionOption.visualBox.width}px`}" >
  {{questionOption.label}}{{questionOption.visualBox.width}}
</div>

要是你需要的是百分比单位，把px换成%就行～

另外提个小建议：尽量别用index作为:key的值，如果你的questionOptions里每个选项有唯一的id之类的标识，用那个当key会更稳妥，能避免列表更新时出现一些奇怪的渲染问题。

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