Вывести цикл с определеного числа

Question

<template>
  <div>
    <p v-for="n in 21">{{ n }}</p>
  </div>
</template>

<script>

  export default {
    data() {
        return {
            n: 8,
        }
    }
  }
</script>

Подскажите мне надо вывести цикл начиная с 8 и заканчивая 21, а у меня выводит начиная с 1

Answer 1

Не очень хорошая практика использовать v-for и v-if, но если задача чисто теоретическая, то подходит.

var app = new Vue({
  el: '#app',
  data: {
    n: 8,
  },
  template: `  <div>
    <p v-for="(curr, index) in 21" v-if="index + 1 >= n">{{ curr }}</p>
  </div>`,
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
</div>

Лучше всего использовать computed property, для подобных задач.

const app = new Vue({
  el: '#app',
  data: {
    n: 8,
    all: 21,
  },
  template: `<div>
    <p v-for="curr in rows">{{ curr }}</p>
  </div>`,
  computed: {
    rows() {
      return new Array(this.all + 1 - this.n).fill(1).map((_, index) => index + 8)
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Answer 2

Используй computed, если тебе надо как-то модифицировать вывод, в первую очередь тебе надо работать с изменениями массивов:

<template>
  <div>
    <p v-for="item in array">{{ item }}</p>
  </div>
</template>
<script>
  export default {
    data() {
        return {
            n: 8,
        }
    },
    computed: {
    array() {
      return Array.from({length: 21}, (_, i)=>i).filter(item=>item>8)
    }
  },
  }
</script>

БЛОГ НА HUSL

Вывести цикл с определеного числа

Ответы (2 шт):