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>

相关推荐
不要em0啦10 分钟前
从0开始学python:简单的练习题3
开发语言·前端·python
老华带你飞10 分钟前
电商系统|基于java + vue电商系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·后端
星月心城14 分钟前
面试八股文-JavaScript(第四天)
开发语言·javascript·ecmascript
大猫会长17 分钟前
关于http状态码4xx与5xx的背锅问题
前端
喝拿铁写前端25 分钟前
AI 驱动前端开发覆盖的能力全景拆解
前端·javascript·人工智能
1024小神27 分钟前
确认了,Cloudflare的R2对象存储S3接口api不支持在web端使用
前端
不染尘.29 分钟前
应用层之WWW
服务器·javascript·css·网络·网络协议·计算机网络·html
KLW7529 分钟前
vue v-for 列表渲染指令注意
前端·javascript·vue.js
zhengxianyi51536 分钟前
vue 首屏加载优化
前端·javascript·vue.js·nginx·gzip·expires·静态文件缓存
John_ToDebug1 小时前
从 window.external 到 Mojo深度解析 Chromium 中 JS 与 C++ 的 7 种通信机制
javascript·chrome·mojo