Как динамически добавить класс только к одному значению в li?

Question

У меня есть неупорядоченный список, который перебирает объект.Объект хранит две пары ключ / значение: одна представляет собой различительную метку строки, а другая представляет собой сохраненное числовое значение.Однако, когда я перебираю их, они отображаются рядом друг с другом, и я хочу немного их разнести.Как я могу это сделать?

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

Answer 1

Попробуйте:

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

Answer 2

Вы можете попробовать  , который является встроенным пробелом HTML . Однако это то, что я считаю немного места , для большего пространства вы можете применить margin к вашим тегам li.

Таким образом, в вашем случае вы можете сделать что-то вроде этого:

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

Обновление:

В качестве альтернативы, вы можете использовать тег <pre> для предварительного форматирования текста. Он сообщает браузеру, что текст должен отображаться точно так же, как написано в файле HTML, включая любые пробелы или пустые строки. Код будет выглядеть так;

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