vue 实现下拉框动态获取年份

最近项目里需要用到下拉框来动态获取年份，网上找的时候大部分都是js写的，这里记录下用vue来实现。

项目需求：下拉框动态获取年份
项目环境：vue + vue cli +element-ui + select选择器

最终效果：

image.png

1. 页面布局：
   https://element.eleme.cn/#/zh-CN/component/select

<template>
  <el-form :label-position="labelPosition" label-width="130px" :model="formLabelPay" class="input">
      <el-form-item label="Expire date:">
              <el-select v-model="formLabelPay.month" placeholder="MM">
                // 因为月份固定是12个月，所以我直接写死
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
                <el-option label="7" value="7"></el-option>
                <el-option label="8" value="8"></el-option>
                <el-option label="9" value="9"></el-option>
                <el-option label="10" value="10"></el-option>
                <el-option label="11" value="11"></el-option>
                <el-option label="12" value="12"></el-option>
              </el-select>
              <el-select v-model="formLabelPay.year" placeholder="YYYY" @visible-change="yearChange($event)">
                <el-option
                  v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
        </el-form-item>
    </el-form>
</template>

2. 代码：

export default {
  data () {
    years: []
  },
  methods: {
    yearChange () {
      var myDate = new Date()
      var startYear = myDate.getFullYear() - 20// 起始年份
      var endYear = myDate.getFullYear() + 20// 结束年份

      this.years = []
      for (var i = startYear; i <= endYear; i++) {
        this.years.push({value: (i), label: (i)})
      }
  }
}