Question

使用v-for A，B之间的循环为select选项设置值的最佳做法是什么？

例如，

。在1900-2010之间

   <option v-for="i in (1900 to 2010)" :value="i"> {{ i }}

Answer 1

<li v-for="i in (2010 - 1900 + 1)" :value="i + 1900"> {{ i + 1900 }} </li>

您可以将2010和1900更改为最小分数。

 <li v-for="i in (max - min + 1)" :value="i + min"> {{ i + min }} </li>

演示：https://jsfiddle.net/mmbq7xpx/

Answer 2

我更喜欢在控制器中生成这样的对象，以便不在模板中存储业务逻辑。

我使用lodash _.range生成范围数组。

＆＃13;

const min = 1900;
const max = 2010;
    
new Vue({
  el: '#app',
  data: {
    years: _.range(min, max + 1)
  }
})

＆＃13;

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>

<div id="app">
  <select>
    <option v-for="i in years" :value="i"> {{ i }}</option>
  </select>
</div>

＆＃13;

VueJs - 两个数字之间循环的最佳实践

2 个答案: