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>

相关推荐
CsharpDev-奶豆哥1 分钟前
如何理解前端开发中的“换皮“
前端·css·css3
Mike_jia2 分钟前
Navicat 数据库管理全攻略:从基础操作到企业级应用实战
前端
神秘红光可达鸭2 分钟前
react UI=f(state) 的演进之路
javascript·react.js
Jackson_Mseven2 分钟前
如何从0到1搭建基于antd的monorepo库——使用rollup进行打包、lerna进行版本管理和发布(六)
前端·react.js·ant design
圆号手3 分钟前
手搓ag-grid带筛选的下拉选择器(类似企业版的agRichSelectCellEditor)
前端
Lestat3 分钟前
Vue Router 中 params 和 query 的区别
前端
静思己过5 分钟前
AutoDecimal:轻松解决 JavaScript 运算精度问题之toDecimal
前端·javascript
任子行5 分钟前
前端html、css基础的基础
前端
日升6 分钟前
AbortController:让异步操作随时说停就停
前端·javascript·ajax
艾克马斯奎普特6 分钟前
Vue.js 3 渐进式实现之响应式系统——第十二节:watch 的基本实现原理
前端·vue.js