如何动态地将类仅添加到li中的一个值？

Question

我有一个遍历对象的无序列表。该对象存储两个键/值对：一个是行的描述性标签，另一个是存储的数值。但是，当我遍历它们时，它们彼此相邻显示，并且我想将它们间隔一些。我该怎么办？

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

Answer 1

您可以尝试 ，它是内置HTML空白。但是，这就是我认为的少量空间，对于更多空间，您可以将 margin 应用于li标签。

因此，在您的情况下，您可以执行以下操作：

{{ item.label }}   {{ item.value }}

更新：

或者，要获得更多空间，请使用<pre>标记对文本进行预格式化。它指示浏览器该文本在HTML文件中与书写完全一致显示，包括任何空格或空白行。代码看起来像这样；

<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;
}