Как выполнить простой перебор значений от 30 до 40 в цыкле vue.js?

Question

[Vanya Huk]

Как выполнить простой перебор значений от 30 до 40 в цыкле vue.js ?
что-то типа:

for(var i = 30; i < 41; i++)
{
}

Answer 1

[Nikita Velko]

Если вы имеете в виду директиву v-for, то перебор значений осуществляется просто:
<p v-for="n in 40">{{ n }}</p>
Стартовое значение цикла задать в этом случае невозможно, вот тут Эван Ю объясняет, почему он решил не добавлять такую возможность в эту директиву.
Если вам нужно все-таки итерировать цифры не с нуля, а с 30, можно использовать такое решение (взято по той же ссылке):
<p v-for="n in 40">{{ n + 29 }}</p>
Следует заметить, что стартовым значением индекса в v-for является не 0, как мы привыкли в обычных циклах JS, а единица.

Answer 2

[Evgeny Kulakov]

Может так подойдет:
<div v-for="i in 40" v-if="i>=30">{{i}}</div>

Comments

[Vanya Huk]

а как сделать в обратном порядке?

[Evgeny Kulakov]

Vanya Huk, можно извратиться так:
<div v-for="i in 40" v-if="i<12">{{41 - i}}</div>
но выглядит это не очень красиво и непрозрачно. Думаю стоит что-то придумать чтобы избежать таких конструкций.

Answer 3

[0xD34F]

Есть варианты:

1. Добавлять к значению нижнюю границу интервала:
   
   <div v-for="n in 11">{{ n + 29 }}</div>
   
   
2. Отбрасывать ненужные элементы с помощью v-if (не рекомендуется):
   
   <div v-for="n in 40" v-if="n >= 30">{{ n }}</div>
   
   
3. Перебирать заранее подготовленные данные (свойство или параметр компонента):
   
   <div v-for="n in values">{{ n }}</div>
   
   

   values: [ 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 ],

   
   
4. Генерировать нужную последовательность с помощью метода (не круто, при каждом рендеринге вычисляется заново):
   
   <div v-for="n in getValues(30, 40)">{{ n }}</div>
   
   

   getValues(lower, upper) {
     return [...Array(upper - lower + 1)].map((n, i) => lower + i);
   },

   
   

https://jsfiddle.net/ye02a6ct/