当前位置: 首页 > news >正文

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

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-optionv-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>

相关文章:

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

1.实现效果 场景表达&#xff1a; 默认展示当年的年份&#xff0c;默认展示前7年的年份 2.实现思路 创建一个新的Vue组件。 使用<select>元素和v-for指令来渲染年份下拉列表。 使用v-model来绑定选中的年份值。 3.实现代码展示 <template><div><el-…...

二叉树的链式存储

二叉树是一种非常重要的数据结构&#xff0c;它能够高效地进行数据的插入、删除和查找操作。二叉树的每个节点最多有两个子节点&#xff0c;分别是左子节点和右子节点。二叉树可以采用多种不同的存储方式来实现&#xff0c;其中链式存储是最为直观和常用的一种方法。本文将深入…...

[计算机效率] 鼠标手势工具:WGestures(解放键盘的超级效率工具)

3.22 鼠标手势工具&#xff1a;WGestures 通过设置各种鼠标手势和操作进行绑定。当用户通过鼠标绘制出特定的鼠标手势后就会触发已经设置好的操作。有点像浏览器中的鼠标手势&#xff0c;通过鼠标手势操纵浏览器做一些特定的动作。这是一款强大的鼠标手势工具&#xff0c;可以…...

Linux useradd命令教程:如何创建新的用户账户(附实例详解和注意事项)

Linux useradd命令介绍 useradd是Linux中用于添加用户账户的命令。它可以用于创建新的用户&#xff0c;并可以配合不同的选项来指定用户的主目录、UID、GID、组等信息。 Linux useradd命令适用的Linux版本 useradd命令在大多数Linux发行版中都可以使用&#xff0c;包括但不限…...

基于ollama搭建本地chatGPT

ollama帮助我们可以快速在本地运行一个大模型&#xff0c;再整合一个可视化页面就能构建一个chatGPT&#xff0c;可视化页面我选择了chat-ollama&#xff08;因为它还能支持知识库&#xff0c;可玩性更高&#xff09;&#xff0c;如果只是为了聊天更推荐chatbox 部署步骤 下载…...

C++11 数据结构3 线性表的循环链式存储,实现,测试

上一节课&#xff0c;我们学了线性表 单向存储结构&#xff08;也就是单链表&#xff09;&#xff0c;这个是企业常用的技术&#xff0c;且是后面各种的基本&#xff0c;一定要牢牢掌握&#xff0c;如果没有掌握&#xff0c;下面的课程会云里雾里。 一 &#xff0c;循环链表 1…...

初识DOM

目录 前言: 1.初识DOM: 1.1DOM树: 1.2节点&#xff08;Node&#xff09;: 1.2.1元素节点&#xff1a; 1.2.2属性节点&#xff1a; 1.2.3文本节点&#xff1a; 1.3Document对象: 2.操作网页元素: 2.1找出元素&#xff1a; 2.1.1document.getElementById(id)&#xff1…...

计算机视觉实验五——图像分割

计算机视觉实验五——图像分割 一、实验目标二、实验内容1.了解图割操作&#xff0c;实现用户交互式分割&#xff0c;通过在一幅图像上为前景和背景提供一些标记或利用边界框选择一个包含前景的区域&#xff0c;实现分割①图片准备②代码③运行结果④代码说明 2.采用聚类法实现…...

移动Web学习06-移动端适配Less预处理器项目案例

项目目标&#xff1a;实现在不同宽度设备中等比缩放的网页效果 Less代码 import ./base; import ./normalize;// 变量: 存储37.5 rootSize: 37.5rem; *{margin: 0;padding: 0; } body {background-color: #F0F0F0; }// 主体内容 .main {// padding-bottom: (50 / 37.5rem);pa…...

LangChain-25 ReAct 让大模型自己思考和决策下一步 AutoGPT实现途径、AGI重要里程碑

背景介绍 大模型ReAct&#xff08;Reasoning and Acting&#xff09;是一种新兴的技术框架&#xff0c;旨在通过逻辑推理和行动序列的构建&#xff0c;使大型语言模型&#xff08;LLM&#xff09;能够达成特定的目标。这一框架的核心思想是赋予机器模型类似人类的推理和行动能…...

24/04/15总结

多线程&#xff1a; 线程 线程是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位 并发:在同一时刻&#xff0c;有多个指令在单个cpu上交替执行 并行:在同一时刻&#xff0c;有多个指令在多个cpu上同时执行 多线程的实现方式 1.继承…...

vue3、vue2中nextTick源码解析

nexttick是啥 nextTick是Vue提供的一个全局API&#xff0c;由于Vue的异步更新策略导致我们对数据的修改不会更新&#xff0c;如果此时想要获取更新后的Dom&#xff0c;就需要使用这个方法. vue的异步更新策略意思是如果数据变化,vue不会立刻更新dom,而是开启一个队列,把组件更…...

【氮化镓】GaN HEMTs结温和热阻测试方法

文章《Temperature rise detection in GaN high-electron-mobility transistors via gate-drain Schottky junction forward-conduction voltages》&#xff0c;由Xiujuan Huang, Chunsheng Guo, Qian Wen, Shiwei Feng, 和 Yamin Zhang撰写&#xff0c;发表在《Microelectroni…...

c++11 标准模板(STL)本地化库 - 平面类别(std::codecvt) - 在字符编码间转换,包括 UTF-8、UTF-16、UTF-32 (四)

本地化库 本地环境设施包含字符分类和字符串校对、数值、货币及日期/时间格式化和分析&#xff0c;以及消息取得的国际化支持。本地环境设置控制流 I/O 、正则表达式库和 C 标准库的其他组件的行为。 平面类别 在字符编码间转换&#xff0c;包括 UTF-8、UTF-16、UTF-32 std::…...

【状态压缩 容斥原理 组合数学】100267. 单面值组合的第 K 小金额

本文涉及知识点 状态压缩 容斥原理 组合数学 二分查找算法合集 LeetCode100267. 单面值组合的第 K 小金额 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给你一个整数 k 。 你有无限量的每种面额的硬币。但是&#xff0c;你 不能 组合使用不同面额的硬币。 返回…...

.net框架和c#程序设计第三次测试

目录 一、测试要求 二、实现效果 三、实现代码 一、测试要求 二、实现效果 数据库中的内容&#xff1a; 使用数据库中的账号登录&#xff1a; 若不是数据库中的内容&#xff1a; 三、实现代码 login.aspx文件&#xff1a; <% Page Language"C#" AutoEventW…...

架构师系列-搜索引擎ElasticSearch(五)- 索引设计

索引创建后&#xff0c;要非常谨慎&#xff0c;创建不好后面会出现各种问题。 索引设计的重要性 索引创建后&#xff0c;索引分片只能通过_split和_shrink 接口对其进行成倍的增加和缩减。 ES的数据是通过_routing分配到各个分片上的&#xff0c;所以本质上不推荐区改变索引的…...

kafka ----修改log4j、jmx、jvm参数等

1、修改log4j 日志路径 在kafka-run-class.sh文件中修改如下配置&#xff0c;将 LOG_DIR变量指定为自己想要存储的路径 # Log directory to use if [ "x$LOG_DIR" "x" ]; thenLOG_DIR"$base_dir/logs" fi2、修改jmx参数 在kafka-run-class.s…...

Python 全栈 Web 应用模板:成熟架构,急速开发 | 开源日报 No.223

tiangolo/full-stack-fastapi-template Stars: 15.6k License: MIT full-stack-fastapi-template 是一个现代化的全栈 Web 应用模板。 使用 FastAPI 构建 Python 后端 API。使用 SQLModel 进行 Python SQL 数据库交互&#xff08;ORM&#xff09;。Pydantic 用于数据验证和设…...

STM32之DHT11温湿度传感器

目录 一 DHT11温湿度传感器简介 1.1 传感器特点 1.2 传感器特性 1.3 传感器引脚说明 二 测量原理及方法 2.1 典型应用电路 2.2 单线制串行简介 2.2.1 串行接口 (单线双向) 2.2.2 数据示例 2.3 通信时序 三 单片机简介 3.1 STM32F103C8T6最小系统板 四 接线说明 …...

paddle ocr

paddle安装教程&#xff0c;git clone xxxgit https://blog.csdn.net/Castlehe/article/details/117356343 只有paddle 1.x 的教程&#xff1a;https://github.com/PaddlePaddle/PaddleOCR/blob/static/doc/doc_en/quickstart_en.md 报错是因为安装的是paddle 2.x而教程只给了…...

Xcode 15.0 新 #Preview 预览让 SwiftUI 界面调试更加悠然自得

概览 从 Xcode 15 开始&#xff0c;苹果推出了新的 #Preview 宏预览机制&#xff0c;它无论从语法还是灵活性上都远远超过之前的预览方式。#Preview 不但可以实时预览 SwiftUI 视图&#xff0c;而且对 UIKit 的界面预览也是信手拈来。 想学习新 #Preview 预览的一些超实用调试…...

【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境

【VS2019】x64 Native Tools Command Prompt for Vs 2019使用conda命令进入环境 安装完VS2019后&#xff0c;打开终端x64 Native Tools Command Prompt for Vs 2019&#xff0c;直接运行conda会出现‘conda’ 不是内部或外部命令&#xff0c;也不是可运行的程序 原因分析&am…...

网络篇09 | 运输层 udp

网络篇09 | 运输层 udp 01 简介UDP 是面向报文的 02 报文协议 01 简介 UDP 只在 IP 的数据报服务之上增加了一些功能&#xff1a;复用和分用、差错检测 UDP 的主要特点&#xff1a;无连接。发送数据之前不需要建立连接。 使用尽最大努力交付。即不保证可靠交付。 面向报文。…...

vim相关指令

vim的各种模式及其转换关系图 vim 默认处于命令模式&#xff01;&#xff01;&#xff01; 模式之间转换的指令 除【命令模式】之外&#xff0c;其它模式要切换到【命令模式】&#xff0c;只需要无脑 ESC 即可&#xff01;&#xff01;&#xff01; [ 命令模式 ] 切换至 [ 插…...

STM32常见调试工具介绍

STM32的常见调试工具主要包括ST-LINK、USB转TTL、USB转485以及USB转CAN。这些工具在嵌入式系统开发、调试以及通信中发挥着重要的作用。 1.ST-LINK&#xff1a; ST-LINK是STMicroelectronics公司专为其STM32系列微控制器开发的调试和编程工具。既能仿真也能将编译好的程序下载…...

简历上写熟悉Linux下常用命令?直接寄

大家写简历技术栈时&#xff0c;都觉得越多越好&#xff0c;其中一条&#xff0c;熟悉Linux下常用命令&#xff1f;其实开发中Linux不是必备考点&#xff0c;除了运维&#xff0c;真正用的多的仅仅cd ls mkdir等&#xff0c;但当面试官问到上面命令时&#xff0c;是不是就傻眼了…...

【设计模式】4、prototype 原型模式

四、prototype 原型模式 https://refactoringguru.cn/design-patterns/prototype 如果希望 复制对象, 可使用 “prototype 模式” 如果 “待复制的对象” 是 interface 而不是 class, 或者如果 class 有 private 变量时. 无法知道 "待复制的对象"的细节, 则需要其…...

ES6 关于Class类的继承 extends(2024-04-10)

1、简介 类Class 可以通过extends关键字实现继承&#xff0c;让子类继承父类的属性和方法。extends 的写法比 ES5 的原型链继承&#xff0c;要清晰和方便很多。 class Foo {constructor(x, y) {this.x x;this.y y;console.log(父类构造函数)}toString() {return ( this.x …...

边缘计算【智能+安全检测】系列教程--使用OpenCV+GStreamer实现真正的硬解码,完全消除马赛克

通过现有博客的GST_URL = "rtspsrc location=rtsp://admin:abcd1234@192.168.1.64:554/h264/ch01/main/av_stream latency=150 ! rtph264depay ! avdec_h264 ! videorate ! videoconvert ! appsink sync=false" GStreamer的解码方式解码,大多情况应该存在上图马赛克…...

宁夏吴忠市红寺堡建设局网站/百度seo搜索引擎优化厂家

前言&#xff1a;进行软件测试面试时&#xff0c;相信大家或多或少都会被问到一些关于计算机网络的问题&#xff0c;今天这篇文章就目前反馈比较多的计算机网络面试题及答案做了一个整理&#xff0c;在找工作的你&#xff0c;赶紧看过来~ 1. 说一下你理解的七层网络模型&#…...

一学一做征文网站/广东seo教程

Lvs Dr模式的模拟测试 1.用ifconfig配置IP&#xff0c;Lvs的ip为200.168.10.1, realserver1的ip为200.168.10.2&#xff0c;realserver2的ip为200.168.10.3&#xff0c;虚拟IP 为200.168.10.10。 2.Lvs server配置&#xff1a; Shell>ifconfig eth0:0 200.168.10.10 netmask…...

二手网站专业做附近人的有吗/杭州优化排名哪家好

今天从跟公司牛人那学到的~避免以后忘了赶快记录下来 平时JS的function的返回值可以是一个数值&#xff0c;也可以是一个对象&#xff08;{name:abc,age:123}&#xff09;&#xff0c;更可以是一个函数&#xff08;这里我是第一次听说&#xff09;&#xff0c;从网上搜了搜&…...

做海报找背景图有哪些网站/优化网站排名推广

一、linux 系统内核参数 /etc/sysctl.conf文件常用参数 net.core.netdev_max_backlog 32768 #允许送到队列的数据包的最大数目 net.core.rmem_max 8388608 #SOCKET读缓存区大小net.core.wmem_max 8388608 #SOCKET写缓存区大小net.core.somaxconn 32768 …...

教育wordpress模板下载地址/广告引流推广平台

Android9系统源码下载 Android9源码编译 Android Studio 系统源码调试 1.系统源码目录结构 art 全新的ART运行环境bionic&#xff1a;Goolgle开发系统C库&#xff0c;以BSD许可形式开源&#xff08;c&#xff09;bootable系统引导相关代码build 存系统编译规则以及generic等基…...

免费装饰公司网站模板/广告网络营销

java jdk 8反编译工具JD-GUI、procyon-decompiler、luyten、crf下载使用简介 本文对常用的反编译工具进行简单介绍JD-GUI、procyon-decompiler、luyten、crf反编译工具分类 JD-GUI JDK7以及之前可以使用 JD-GUI&#xff0c;如果版本>1.8 各种问题http://java-decompiler.g…...