javascript - v-bind如何绑定(bind):style work to modify width css property?

Question

下面的代码不会为我的 div 生成任何样式，但是属性 questionOption.visualBox.width 打印在 div 中就好了，我做错了什么？

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

Answer 1

因为需要写宽度的单位。使用您当前的代码，它将生成如下所示的 css:

{
    ...
    width: 34
    ...
}

不会产生视觉效果。

因此您需要添加一个单位(例如:%、px)。例如，如果你想要 px 你必须写:

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