Element-UI plus 自定义-下拉框选择年份【vue3】

1.实现效果


2.实现代码展示

javascript 复制代码
<template>
	<el-select v-model="selectedYear" placeholder="请选择">
	  <el-option
		v-for="year in yearOptions"
		:key="year"
		:label="year"
		:value="year">
	  </el-option>
	</el-select>
  </template>

  <script setup>
  import { ref, onMounted } from 'vue';
  import { getCurrentInstance } from 'vue';

  const selectedYear = ref('');
  const yearOptions = ref([]);

  onMounted(() => {
	const currentYear = new Date().getFullYear();
	selectedYear.value = String(currentYear);
	for (let i = currentYear; i >= 2010; i--) {
	  yearOptions.value.push(String(i));
	}
  });
  </script>

相关推荐
小马_xiaoen4 分钟前
Proxy 与 Reflect 从入门到实战:ES6 元编程核心特性详解
前端·javascript·ecmascript·es6
hoiii18715 分钟前
MATLAB SGM(半全局匹配)算法实现
前端·算法·matlab
摘星编程1 小时前
React Native + OpenHarmony:ImageSVG图片渲染
javascript·react native·react.js
计算机学姐1 小时前
基于SpringBoot的民宿预定管理系统【三角色+个性化推荐算法+数据可视化统计】
java·vue.js·spring boot·mysql·信息可视化·intellij-idea·推荐算法
会编程的土豆1 小时前
新手前端小细节
前端·css·html·项目
摘星编程1 小时前
OpenHarmony + RN:Text文本书写模式
javascript·react native·react.js
广州华水科技2 小时前
单北斗GNSS在桥梁形变监测中的应用与技术进展分析
前端
我讲个笑话你可别哭啊2 小时前
鸿蒙ArkTS快速入门
前端·ts·arkts·鸿蒙·方舟开发框架
CherryLee_12102 小时前
基于poplar-annotation前端插件封装文本标注组件及使用
前端·文本标注
特立独行的猫a2 小时前
C++轻量级Web框架介绍与对比:Crow与httplib
开发语言·前端·c++·crow·httplib