使用VueJS从1900年到今年创造年

时间:2018-04-07 06:50:33

标签: javascript vue.js vuejs2

我正在使用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年开始以<option>为循环?

3 个答案:

答案 0 :(得分:5)

  1. 不要在循环中使用方法,而是使用计算属性。
  2. 请勿在{{1​​}}元素中使用v-ifIt's bad!
  3. &#13;
    &#13;
    v-for
    &#13;
    new Vue ({
      el: '.container',
      computed : {
        years () {
          const year = new Date().getFullYear()
          return Array.from({length: year - 1900}, (value, index) => 1901 + index)
        }
      }
    })
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

您可以使用v-if

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

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

答案 2 :(得分:0)

str3='Hg0.75SrBa2Ca2Cu3O8'
splitted = list(regex.split("([A-Z][a-z]*)",str3))
keyss = list(filter(lambda a: a[0].isupper() if a else False, splitted))
values = list(filter(lambda a: a[0].isdigit() if a else False, splitted))
print(keyss, values)