Vue Js Year Picker Example

<!DOCTYPE html>
<html>

<body>
  <div id="app">
    <h3>Vue Js Year Picker Example</h3>
    <select v-model="selectedYear">
      <option value="" disabled selected>Select a year</option>
      <option v-for="year in yearList" :value="year">{{ year }}</option>
    </select>
  </div>
  <script type="module">
    const app = Vue.createApp({
      data() {
        return {
          selectedYear: '',
          startYear: 1990,
          endYear: new Date().getFullYear(),
        }
      },
      computed: {
        yearList() {
          const years = [];
          for (let i = this.endYear; i >= this.startYear; i--) {
            years.push(i);
          }
          return years;
        },
      },
    });
    app.mount('#app');
  </script>
  <style>
    #app {
      text-align: center;
      margin-top: 50px;
    }

h3 {
      color: #333;
    }

select {
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

option[disabled] {
      color: #999;
    }

option[selected] {
      font-weight: bold;
    }
  </style>

</body>

</html>