使用VueJS生成从1900年到当前年的年份

Question

我正在使用VueJS创建注册表格！用户必须输入他/她的出生日期。

那么，如何在<select>元素中生成从1900到当前年份的年份呢？

我尝试了这个：

new Vue ({
  el: '.container',
  methods: {
    getCurrentYear() {
      return new Date().getFullYear();
    }
  }
});

<div class="container">
  <select id="dob">
    <option value="0">Year:</option>
    <option v-for="year in getCurrentYear()" :value="year">{{ year }}</option>
  </select>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

但是，在这种情况下，年份从1开始。那么，我该如何循环浏览<option>从1900年开始的年份？

Answer 1

1. 不要在循环中使用方法，而应使用计算属性。
2. 不要v-if在v-for元素中使用。这不好！

new Vue ({
  el: '.container',
  computed : {
    years () {
      const year = new Date().getFullYear()
      return Array.from({length: year - 1900}, (value, index) => 1901 + index)
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

<div class="container">
<select id="dob">
  <option value="0">Year:</option>
  <option v-for="year in years" :value="year">{{ year }}</option>
</select>
</div>