루프를 만들 때 Vue Js에서 특정 번호 범위를 표시하는 방법은 무엇입니까?

루프를 만들 때 Vue Js에서 특정 번호 범위를 표시하는 방법은 무엇입니까?

루프를 만들 때 특정 번호를 얻으려면 어떻게 해야 하나요? 제 경우 5 이상의 숫자만 얻거나 원하는 범위 내에서 얻기를 원합니다.

<select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option v-for="n in 8" :value="n">Previous {{n}} games</option>
</select>

결과는 다음과 같습니다.

<select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option value="5">Previous 5 games</option>
<option value="6">Previous 6 games</option>
<option value="7">Previous 7 games</option>
<option value="8">Previous 8 games</option>
</select>

사용 사례에 따라 다르지만 다음 방법 중 하나가 있습니다.

var vm = new Vue({
el: '#app',
    data: {
        selectcompetitionyear:5
    },
    methods:{
        getNumbers:function(start,stop){
            return new Array(stop-start).fill(start).map((n,i)=>n+i);
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.min.js"></script>
<div id="app" class="l-container l-vPad--mid">
    <select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option v-for="n in getNumbers(5,9)" :value="n">Previous {{n}} games</option>
</select>
</div>

제 해결책은 현재 루프 값에 숫자를 추가하는 것이었습니다.

<select name="" id="input" class="form-control" v-model="selectcompetitionyear">
    <option v-for="n in 5" :value="n+5">Previous {{ n + 5 }} games</option>
</select>

단계를 제어하려면 다음을 사용할 수 있습니다.

<option v-for="n in getNumbers(5,25,5)" :value="n">{{ n }}</option>

methods: {
      getNumbers:function(start,stop,step = 1){
        return new Array(stop / step).fill(start).map((n,i)=>(i+1)*step);
      },
}

그 결과는 다음과 같습니다.

가장 쉬운 방법은 옵션 루프 내에서 v-if를 사용하는 것입니다.

<option v-for="n in 8" v-if="n >=5" :value="n">Previous {{n}} games</option>

언급URL : https://stackoverflow.com/questions/44176230/how-to-display-specific-range-of-number-in-vue-js-when-making-a-loop