javascript - v-bind:style如何修改CSS宽度属性？

下面的代码没有为我的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>

最佳答案

这是因为您需要写出宽度的单位。使用您当前的代码，它将生成如下所示的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>