v-bind:style은 width css 속성을 어떻게 수정합니까?

v-bind:style은 width 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>

언급URL : https://stackoverflow.com/questions/57428911/how-does-v-bindstyle-work-to-modify-width-css-property