Блог

Главная - Вопросы по программированию - Как я могу указать начальное значение для диапазона при использовании директивы v-for в Vue.js v2.x?

Как я могу указать начальное значение для диапазона при использовании директивы v-for в Vue.js v2.x?

#javascript #vue.js #v-for

#javascript #vue.js #v-for

Вопрос:

Я работаю над распечаткой номеров страниц, на которые пользователь может нажать для компонента пейджера в Vue.js . Я вижу, что в документах четко указано, что v-for можно использовать для диапазона:

v-for также может принимать целое число. В этом случае он будет повторять шаблон так много раз.

<div> <span v-for="n in 10">{{ n }} </span> </div>

Результат:

1 2 3 4 5 6 7 8 9 10

За https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Range

Я все равно не нашел, чтобы указать начальное значение для n . Кажется, что оно начинается с 1 и увеличивается на 1 до 10.

Есть ли способ начать n, скажем, с 5?

Похоже, мне нужно будет создать метод или вычисляемое свойство, которое вернет массив точных значений, которые я хочу повторить вместо статического 10.

У кого-нибудь есть другие мысли?

Ответ №1:

Нет способа начать a v-for с n .

Однако начать со смещения так же просто, как добавить смещение к вашему значению, а затем остановиться, когда вы нажмете max .

 <div>
  <template v-for="n in max">
    <span v-if="n   offset <= max">{{ n   offset }} </span>
  </template>
</div>

Если вам нужно больше контроля, computed свойство — это, безусловно, правильный путь, поскольку оно предоставит вам полный контроль над тем, что вы повторяете.

 <div>
  <span v-for="n in computedArr">{{ n }} </span>
</div>
  
   computed: {
    computedArr() {
      let arr = [];
      for (var i = this.offset; i <= this.max; i  )
        arr.push(i);
      return arr;
    },
    ...

Комментарии:

1. Это то, что я в итоге сделал. Спасибо!

2. Не было бы лучше использовать arr.push[i] вместо arr[i] = i . С последним вы начинаете записывать в массив в позиции, которая равна i, а не 0, и в результате получается длина массива, которая больше, чем его фактические записи.

3. @Stefan Вы совершенно правы; для этой конкретной функциональности это, похоже, не имеет значения, но выполнение этого с arr[i] = [i] может привести к странным ошибкам / поведению в будущем, поскольку длина результирующего массива действительно будет max 1 вместо max 1 - offset , как вы ожидаете. Я поменяю его на push() в примере.

Ответ №2:

Один из способов — определить собственную вспомогательную функцию для генерации последовательности:

 Vue.prototype.$range = function *(start, end, step = 1) {
  for (let i = start; i <= end; i  = step) {
    yield i
  }
}

new Vue({ el: '#app' })  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>

<div id="app">
  <div v-for="i of $range(5, 10)">
    {{ i }}
  </div>
</div>

Ответ №3:

  <div-for="index in Array(y).fill(x).map((x, y) => x   y)" :key="index">{{ index }}</div>

x это начальная позиция и y количество последующих чисел.

итак, это…

 Array(6).fill(5).map((x, y) => x   y)

хотите ли вы [5, 6, 7, 8, 9, 10] , чтобы массив проходил.

Я думаю, что это должен быть более эффективный ответ.