如何动态添加一个 class 到 li 中的一个值？

Question

我有一个遍历对象的无序列表。该对象存储了两个key/value对：一个是行的描述性标签，另一个是存储的数值。但是，当我遍历它们时，它们彼此相邻显示，我想 space 它们一点。我该怎么做？

<ul>
 <li
  v-for="item in shiftOrderProductivity"
  :key="item"
 >{{ item.label }} {{ item.value }}</li>
</ul>

Answer 1

你可以试试 ，它是built-inHTML白色space。然而，这就是我认为 一点 space，更多 space 你可以应用 margin 到你的 li标签。

因此，在您的情况下，您可以这样做：

{{ item.label }} &nbsp; {{ item.value }}

更新：

或者，对于更多 space，您可以使用 <pre> 标记到 pre-format 文本。它指示浏览器文本 与 HTML 文件中写入的 完全相同，包括任何 space 或空行。代码看起来像这样；

<ul>
 <li
  v-for="item in shiftOrderProductivity"
  :key="item"
 ><pre>{{ item.label }} **as much space as you need** {{ item.value }}</pre></li>

Answer 2

试试这个：

HTML

<ul>
  <li
     v-for="item in shiftOrderProductivity"
     :key="item"
  ><span class="mr-100">{{ item.label }}</span>{{ item.value }}</li>
</ul>

CSS

.mr-100 {
   margin-right: 100px;
}

How to dynamically add a class just to one value in li?