如何用VueJS生成1900至当前年份的<select>下拉选项？

嘿，我来帮你搞定这个出生日期年份选择的问题～ 你现在的代码问题在于，v-for="year in getCurrentYear()" 会循环生成从1到当前年份的所有数字，而不是从1900开始的范围，所以得调整一下生成年份数组的方式。

这里推荐用计算属性来生成我们需要的年份范围，既优雅又符合Vue的响应式特性，具体代码如下：

首先是Vue实例部分：

new Vue({
  el: '.container',
  computed: {
    years() {
      const currentYear = new Date().getFullYear();
      // 生成从1900到当前年份的数组
      return Array.from({ length: currentYear - 1900 + 1 }, (_, index) => 1900 + index);
    }
  }
});

然后是模板部分：

<div class="container">
  <select id="dob">
    <option value="0">Year:</option>
    <!-- 循环我们生成的years数组，记得加上key属性哦 -->
    <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
  </select>
</div>

代码解释： #

• 计算属性years会动态生成包含1900到当前年份的所有数字的数组：
  • currentYear - 1900 + 1 是数组的长度，确保我们包含1900和当前年份这两个端点
  • Array.from 用来创建新数组，第二个回调函数里用index计算对应的年份（1900加上索引值）
• 模板里的v-for循环这个数组，同时加上:key="year"是Vue的要求，用来优化渲染性能和避免控制台警告

如果你更习惯用方法来生成数组，也可以这么写（不过计算属性更适合这种依赖固定逻辑的场景）：

new Vue({
  el: '.container',
  methods: {
    getYears() {
      const currentYear = new Date().getFullYear();
      let years = [];
      for (let year = 1900; year <= currentYear; year++) {
        years.push(year);
      }
      return years;
    }
  }
});

模板里就改成v-for="year in getYears()"，记得同样加上:key="year"。

这样调整后，你的select下拉框就会正确显示从1900年到当前年份的所有选项啦～

内容的提问来源于stack exchange，提问作者Sanjay