Element-UI 自定义-下拉框选择年份

news2024/10/7 16:23:08

1.实现效果

        场景表达:   默认展示当年的年份,默认展示前7年的年份

2.实现思路

  1. 创建一个新的Vue组件。

  2. 使用<select>元素和v-for指令来渲染年份下拉列表。

  3. 使用v-model来绑定选中的年份值。


3.实现代码展示

<template>
	<div>
	  <el-select v-model="form.recentYear" @change="selectyare" placeholder="请选择" clearable>
		<el-option
		  v-for="item in years"
		  :key="item.value"
		  :label="item.label"
		  :value="item.value">
		</el-option>
	  </el-select>
	</div>
  </template>
  <script>
	export default {
	  data(){
		return{
		  years:[],
		  form:{
			recentYear:''
		  }
		}
	  },
	  methods:{
		init(){
		  var myDate = new Date;
		  var year = myDate.getFullYear();//获取当前年
		  this.initSelectYear(year)
		  this.form.recentYear = year;
		},
		initSelectYear(year){
		  this.years = [];
		  for(let i=0;i<30;i++){
			this.years.push({value:(year - i),label:(year - i)+ "年"});
		  }
		},
		selectyare(value){
		  this.form.recentYear = value
		},
	  },
	  created() {
		this.init()
	  }
	}
  </script>




本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1594475.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数学:人工智能学习之路上的“拦路虎”及其背后的奥秘

在人工智能的浪潮席卷全球的今天&#xff0c;越来越多的人开始涉足这一领域&#xff0c;以期掌握其核心技术&#xff0c;为未来的科技发展贡献力量。然而&#xff0c;在学习的道路上&#xff0c;许多人却遇到了一个不小的挑战——数学。为何数学会成为学习人工智能的“拦路虎”…

多波长,无限可能:探索波分复用的前沿 ✨

&#x1f331;当我们谈论光纤通信时&#xff0c;波分复用是一个不可忽视的关键词。它不仅改变了通信的速度和容量&#xff0c;更是连接数字世界的一座隐形桥梁。让我们深入了解这项技术的精髓。 &#x1f4da; 目录 ❓什么是WDM波分复用&#xff1f;以及WDM工作原理&#x1f5…

有真的副业推荐吗?

#有真的副业推荐吗# 我做副业项目的时候&#xff0c;认识了一位带娃宝妈&#xff0c;讲一下她空闲时间做副业赚钱的故事吧。在一个温馨的小家庭里&#xff0c;李婷是一位全职宝妈&#xff0c;她的主要任务是照顾和陪伴自己可爱的宝宝。然而&#xff0c;随着宝宝逐渐长大&#x…

Linux应用开发笔记(八)SPI应用层开发及其框架

文章目录 前言一、扩展SPI协议&#xff08;Single/Dual/Quad/Octal SPI&#xff09;二、SPi驱动框架三、SPI应用编程1. SPI相关数据结构与ioctl函数2. 基本函数 前言 与IIC类似&#xff0c;SPI协议也是我们的老朋友了&#xff0c;这里依然不多作赘述&#xff0c;本文将介绍SPI的…

Flutter第八弹 构建拥有不同项的列表

目标&#xff1a;1&#xff09;项目中&#xff0c;数据源可能涉及不同的模版&#xff0c;显示不同类型的子项&#xff0c;类似RecycleView的itemType, 有多种类型&#xff0c;列表怎么显示&#xff1f; 2&#xff09;不同的数据源构建列表 一、创建不同的数据源 采用类似Rec…

韩顺平Java | C25 JDBC和连接池(上)

概述 JDBC概述&#xff1a;JDBC为访问不同数据库提供统一接口&#xff0c;为使用者屏蔽细节问题。Java程序员使用JDBC可以连接任何提供了JDBC驱动程序的数据库系统&#xff0c;从而完成对数据库的各种操作。 // 模拟代码 //JdbcInterface.java --Java规定的JDBC接口(方法) p…

Linux-文件系统理解(磁盘的物理与逻辑结构、什么是inode、OS如何管理磁盘)

一、磁盘 磁盘的物理结构 磁盘的本质是一个机械设备&#xff0c;可以存储大量的二进制信息&#xff0c;是实现数据存储的基础硬件设施&#xff0c;磁盘的盘片类似于光盘&#xff0c;不过盘片的两面都是可读可写可擦除的&#xff0c;每个盘面都有一个磁头&#xff0c;马达可以使…

keil无法查看外设寄存器(生成SFR文件)

1.前言 自从更新了keil&#xff0c;用的是越来越不顺手了&#xff0c;一会是cannot evaluate&#xff0c;一会是与强制与cubemx强制联系了&#xff0c;这次也是的&#xff08;地铁&#xff0c;老人&#xff0c;手机&#xff09;折腾了一下总是搞好了&#xff08;网上的解法只能…

安卓刷机fastboot分段传输

win10 fastboot 无法识别&#xff0c;驱动下载地址GitHub - xushuan/google_latest_usb_driver_windows 把inf文件更新到设备管理器驱动更新即可 问题 archive does not contain super_empty.img Sending vbmeta_a (4 KB) OKAY [ 0.117s] Writing …

Open CASCADE学习|实现Extrude功能

首先定义了一些基本的几何元素&#xff0c;如线、圆和平面&#xff0c;然后使用makeExtrudebydir函数来对一个面进行挤出操作。下面是详细过程&#xff1a; 定义Extrude函数&#xff1a;makeExtrudebydir函数接受一个TopoDS_Shape对象和一个gp_Vec对象作为参数。TopoDS_Shape是…

【vs2019】window10环境变量设置

【vs2019】window10环境变量设置 【先赞后看养成习惯】求关注点赞收藏&#x1f60a; 安装VS2019时建议默认安装地址&#xff0c;最好不要改动&#xff0c;不然容易出问题 以下是安装完VS2019后环境变量的设置情况&#xff0c;C:\Program Files (x86)\Microsoft Visual Studi…

【Unity添加远程桌面】使用Unity账号远程控制N台电脑

设置地址&#xff1a; URDP终极远程桌面&#xff1b;功能强大&#xff0c;足以让开发人员、设计师、建筑师、工程师等等随时随地完成工作或协助别人https://cloud-desktop.u3dcloud.cn/在网站登录自己的Unity 账号上去 下载安装被控端安装 保持登录 3.代码添加当前主机 "…

初探vercel托管项目

文章目录 第一步、注册与登录第二步、本地部署 在个人网站部署的助手vercel&#xff0c;支持 Github部署&#xff0c;只需简单操作&#xff0c;即可发布&#xff0c;方便快捷&#xff01; 第一步、注册与登录 进入vercel【官网】&#xff0c;在右上角 login on&#xff0c;可登…

【小迪安全2023】第23天:WEB攻防-Python考点CTF与CMS-SSTI模版注入PYC反编译

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【Java、PHP】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收…

Linux 文件页反向映射

0. 引言 操作系统中与匿名页相对的是文件页&#xff0c;文件页的反向映射对比匿名页的反向映射更为简单。如果还不清楚匿名页反向映射逻辑的&#xff0c;请移步 匿名页反向映射 1. 文件页反向映射数据结构 struct file&#xff1a; 用户进程每open()一次文件&#xff0c;则会生…

微服务相关

1. 微服务主要七个模块 中央管理平台&#xff1a;生产者、消费者注册&#xff0c;服务发现&#xff0c;服务治理&#xff0c;调用关系生产者消费者权限管理流量管理自定义传输协议序列化反序列化 2. 中央管理平台 生产者A在中央管理平台注册后&#xff0c;中央管理平台会给他…

BLIP 算法阅读记录---一个许多多模态大语言模型的基本组件

论文地址&#xff1a;&#x1f608; 目录 一、环境配置以及数据集准备 数据集准备 数据集格式展示 环境配置&#xff0c;按照官网所述即可 二、一些调整 vit_base的预训练模型 远程debug的设置 Tokenizer初始化失败 读入网络图片的调整 三、训练过程 Image Encoder …

Kylin IPv4 setting config

Kylin IPv4 setting-CSDN博客 上次配置完重启又没了&#xff0c;永久需要修改配置文件 /etc/sysconfig/network-scripts ifcfg-ens33

langchain-chatchat指定一个或多个文件回答,不允许回答内容有其他文件内容,即屏蔽其他文件内容

1.找到langchain-chatchat中的knowledge_base_chat.py 2.knowledge_base_chat.py的api内容加上一个flie_name参数&#xff0c;即传过来你需要指定一个文件名称&#xff0c;或多个文件名称&#xff0c;同时也可以不指定&#xff0c;加上以下代码&#xff1a; flie_name: List …

腾讯云优惠券详细介绍及领券步骤详解

随着云计算技术的不断发展和普及&#xff0c;越来越多的企业和个人开始选择使用云服务来满足自身的需求。腾讯云作为国内领先的云服务提供商&#xff0c;以其稳定、高效、安全的服务赢得了广大用户的信赖。为了回馈广大用户&#xff0c;腾讯云经常推出各种优惠活动&#xff0c;…