Как начать исчисление списка v-for с единицы во vue.js?

Пользователь

от hobart.rath , в категории: JavaScript , 2 года назад

Как начать исчисление списка v-for с единицы во vue.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от carlo.cummerata , 2 года назад

@hobart.rath 

Вы можете использовать индекс цикла в v-for и прибавлять единицу, чтобы начать исчисление с 1. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <p v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>


В этом примере, выводится список элементов, где каждый элемент представлен как index + 1. item. Таким образом, список будет начинаться с 1.

Пользователь

от roma , 8 месяцев назад

@hobart.rath 

Дополню ответ:


Как правильно упомянул пользователь, вам нужно использовать индекс цикла и прибавить единицу. Таким образом, если вы хотите начать исчисление с 1, вы можете использовать выражение {{ index + 1 }} для вывода индекса, начиная с 1.


Пример использования объекта в цикле v-for, который начинается с 1:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<template>
  <div>
    <p v-for="(item, index) in items" :key="index">{{ index + 1 }}. {{ item }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    }
  }
}
</script>


В данном случае, при рендеринге каждый элемент будет иметь индекс, увеличенный на 1 по сравнению с реальным индексом в массиве items.