循环时如何在Vue Js中显示特定范围的数字？

Question

循环时如何得到具体的数字，在我的例子中我只想得到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>

Answer 1

这取决于用例，但其中一种方法是：

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>

Answer 2

我的解决方案只是在当前循环值上添加一个数字

<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>

Answer 3

如果您想控制步骤，可以使用以下方法：

<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);
      },
}

结果将是：

Answer 4

最简单的方法是在选项循环中使用 v-if：

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

循环时如何在Vue Js中显示特定范围的数字？

How to display specific range of number in Vue Js when making a loop?

javascript

frontend

loops

vue.js

vuejs2