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

【问题标题】：How to bind dynamically a style property in Vue.js 3?如何在 Vue.js 3 中动态绑定样式属性？
【发布时间】：2021-02-22 00:50:50
【问题描述】：

我只是使用 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样式？

【问题讨论】：

您需要使用paddingLeft，因为不允许使用破折号。

标签： css vue.js templates vuejs3

【解决方案1】：

删除连字符并使用template literal就足够了：

<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"
/>

【讨论】：

【解决方案2】：

您应该将该属性用引号 '' 括起来：

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

【讨论】：