使用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开始计算。那么，我该如何循环遍历从1900年开始的元素？

- Sanjay

---

为什么不使用 <input type="date">？ - nnnnnn

@nnnnnn 不，我不想使用那个。 - Sanjay

Answer 1

1. 使用计算属性而不是在循环中使用方法。
2. 不要在 v-for 元素中使用 v-if。这样做是错误的！

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>

- Frondor

---

我在思考 v-if 是否是一个好的方法。你的回答现在澄清了我的疑惑。非常感谢。标记为答案 :) - Sanjay

v-if 在数组中的每个项目上都会被计算，这在大多数情况下是一种浪费。而计算属性是有记忆功能的，因此它们只会被计算一次，并且在其中某个变量发生更改（响应性）时进行“更新”。如果您直接在 v-for 中使用方法，则每次组件中的某些内容发生更改时都会被计算，这非常昂贵 ;) - Frondor

明白了！谢谢。对我来说，在computed和methods之间做出选择真的很困惑。 - Sanjay

Answer 2

   mounted(){
this.inittahun();          
},
     computed : {
           inittahun() {
      let years = [];
      for (var i = 2001; i <= new Date().getFullYear(); i++) {
        years.push(i );
      }

      this.years = years;
    },

    <select2 v-model="form.tahun">
              <option value="">----</option>
              <option :value="year" v-for="year in years" :key="year">
                {{ year }}
              </option>
            </select2>

- kardotinambunan

---

请尝试描述为什么您提出的解决方案适用于所发布的问题。 - Rune FS

Answer 3

你可以使用 v-if：

  <option v-for="year in getCurrentYear()" v-if="year >= 1900" :value="year">{{ year }}</option>

[ https://v2.vuejs.org/v2/guide/list.html#v-for-with-v-if ]

的内容与编程有关。

- stdob--