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>

相关推荐
m0_639817153 分钟前
基于springboot纺织品企业财务管理系统【带源码和文档】
java·服务器·前端
石小石Orz5 分钟前
qinkun的缓存机制也有弊端,建议官方个参数控制
前端
用户9714171814277 分钟前
Vue3实现拖拽排序
javascript·vue.js
用户40993225021214 分钟前
Vue浅响应式如何解决深层响应式的性能问题?适用场景有哪些?
前端·ai编程·trae
CC码码15 分钟前
重生之我在浏览器里“蹦迪”
前端·javascript·three.js
阡陌昏晨16 分钟前
H5性能优化-打开效率提升了62%
前端·javascript·vue.js
鹏北海17 分钟前
TypeScript 类型工具与 NestJS Mapped Types
前端·后端·typescript
烟袅17 分钟前
一文搞懂 CSS 定位:relative、absolute、fixed、sticky
前端·css
孟祥_成都17 分钟前
你离前端动画高手只差这个秘籍!GSAP ScrollTrigger 动画完全指南!(第一章)
前端·动效
小小前端_我自坚强18 分钟前
React 18 新特性深度解析
前端·javascript·react.js