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>

相关推荐
sTone873751 天前
Android核心概念(一)minSdkVersion targetSdkVersion compileSdkVersion
android·前端
林太白1 天前
八大数据结构
前端·后端·算法
一 乐1 天前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina1 天前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端
国思RDIF框架1 天前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端
oil欧哟1 天前
Agent 设计与上下文工程- 02 Workflow 设计模式(上)
前端·网络·人工智能
StarkCoder1 天前
GetX 状态管理优化:从 GetBuilder 到 Obx 的性能提升实践
前端
小高0071 天前
深入理解 package.json:前端项目的 "身份证"
前端·javascript·vue.js
StarkCoder1 天前
Flutter ListView 数据变动导致的卡顿与跳动问题:Key 的妙用
前端
lichenyang4531 天前
Next.js 学习笔记:从约定式路由到 Tailwind、Image、Font 优雅整合。
前端·javascript·全栈