如何在Vue.js 3中动态绑定样式属性

Question

我刚刚使用了vue3，并希望应用动态样式。我的vue3模板类似：

<ul>
<li v-for="(question, q_index) in questions" :key="q_index" v-show="question.visible" :style="{padding-left: `question.level`rem}">
<Question :title="question.title" :options="question.options" :name="question.id" :visible="question.visible" @opUpdate="opHandle"/>
</li>  
</ul>

我的"-"模板上有错误

Uncaught SyntaxError: Unexpected token '-'

如何在vue3模板中设置动态填充左css样式？

Answer 1

删除连字符并使用模板文字即可：

<ul>
<li
v-for="(question, i) in questions"
:key="i" v-show="question.visible"
:style="{ paddingLeft: `${question.level}rem` }"
>
<Question
@opUpdate="opHandle"
:title="question.title"
:options="question.options"
:name="question.id"
:visible="question.visible"
/>
</li>
</ul>

附加：您还可以使用v-bind将对象项传递给具有相同名称的道具。

<Question
@opUpdate="opHandle"
v-bind="question"  // takes care of `title`, `options` and `visible`
:name="question.id"
/>

Answer 2

您应该用引号'':包装该属性

:style="{'padding-left': `question.level`rem}">