![1900]( "1900")
本文介绍了使用 VueJS 生成从 1900 年到当年的年份的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在用 VueJS 创建一个注册表单！用户必须输入他/她的出生日期.
那么，如何在
我试过了:
新的 Vue ({el: '.container',方法: {获取当前年(){返回新日期().getFullYear();}}});
<select id="dob"><option value="0">年份:</option><option v-for="year in getCurrentYear()" :value="year">{{ year }}</option></选择>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
但是，在这种情况下，年份从 1 开始.那么，如何从 1900 年开始遍历
解决方案
- 不要在循环中使用方法，而是使用计算属性.
- 不要在
v-for 元素中使用 v-if.很糟糕！
新的 Vue ({el: '.container',计算:{年 () {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="容器"><select id="dob"><option value="0">年份:</option><option v-for="year in years" :value="year">{{ year }}</option></选择>
I am creating a registration form with VueJS! The user has to enter his/her date of birth.
So, how can I generate years starting from 1900 to current year in <select> element?
I tried this:
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>
However, the year starts from 1 in this case. So, how can I loop through <option> with the year starting from 1900?
解决方案
- Don't use a method in the loop, use a computed property instead.
- Don't use
v-if in a v-for element. It's bad!
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>
这篇关于使用 VueJS 生成从 1900 年到当年的年份的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！