Vue通过v-for实现年份自动递增

Vue筛选时通过 v-for 实现年份自动递增，供大家参考，具体内容如下

在做数据筛选时一般会用到Element-UI组件的方式进行编写，偶尔也会用平铺的方式对时间进行筛选(类似购物网站的筛选功能)，并实现年份的自动增加

以下是用平铺的方式对数据筛选 (已省略表格)
部分解释的可能不太清楚，但也可以实现的

效果图如下

当年份为2022时

当年份为2030时

代码如下

<template>
? ? <div>
? ? ? ? <div class="block">
? ? ? ? ? ? <span>年份
? ? ? ? ? ? ? ? <el-button class="btnclick" v-for="(item, index) in yearlist" :key="index" size="mini"
? ? ? ? ? ? ? ? ? ? @click="handleFilterYear(item)" round>
? ? ? ? ? ? ? ? ? ? {{ item.DText }}
? ? ? ? ? ? ? ? </el-button>
? ? ? ? ? ? </span>
? ? ? ? </div>
? ? ? ? <div class="block">
? ? ? ? ? ? <span>月份
? ? ? ? ? ? ? ? <el-button class="btnclick" v-for="(item, index) in mouthlist" :key="index" size="mini"
? ? ? ? ? ? ? ? ? ? @click="handleFilterMouth(item)" round>
? ? ? ? ? ? ? ? ? ? {{ item.DText }}
? ? ? ? ? ? ? ? </el-button>
? ? ? ? ? ? ? ? <el-button class="btnclick" type="primary" size="mini" @click="searchClearFun()">重置
? ? ? ? ? ? ? ? </el-button>
? ? ? ? ? ? </span>
? ? ? ? </div>
? ? </div>
</template>?
<script>
export default {
? ? data() {
? ? ? ? return {
? ? ? ? ? ? serch1: new Date().getFullYear(), //年 ?默认传当年年份
? ? ? ? ? ? serch2: '', //月
? ? ? ? ? ? yearlist: [{ //年
? ? ? ? ? ? ? ? Index: 0,
? ? ? ? ? ? ? ? DText: '2022'
? ? ? ? ? ? }],
? ? ? ? ? ? mouthlist: [{ //月
? ? ? ? ? ? ? ? Index: 0,
? ? ? ? ? ? ? ? DText: '1'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 1,
? ? ? ? ? ? ? ? DText: '2'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 2,
? ? ? ? ? ? ? ? DText: '3'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 3,
? ? ? ? ? ? ? ? DText: '4'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 4,
? ? ? ? ? ? ? ? DText: '5'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 5,
? ? ? ? ? ? ? ? DText: '6'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 6,
? ? ? ? ? ? ? ? DText: '7'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 7,
? ? ? ? ? ? ? ? DText: '8'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 8,
? ? ? ? ? ? ? ? DText: '9'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 9,
? ? ? ? ? ? ? ? DText: '10'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 10,
? ? ? ? ? ? ? ? DText: '11'
? ? ? ? ? ? }, {
? ? ? ? ? ? ? ? Index: 11,
? ? ? ? ? ? ? ? DText: '12'
? ? ? ? ? ? }]
? ? ? ? }
? ? }
? ? mounted() {
? ? ? ? // 定义年份列表 ，默认为今年 2022 ，当2023时会自动显示 2022 ?2023 ?.....
? ? ? ? var nowYearList = new Date().getFullYear();
? ? ? ? var nowYearLength = parseInt(nowYearList) - 2022;
? ? ? ? if (nowYearLength > 0) {
? ? ? ? ? ? if (nowYearLength < 2) {
? ? ? ? ? ? ? ? this.yearlist = [{
? ? ? ? ? ? ? ? ? ? Index: 0,
? ? ? ? ? ? ? ? ? ? DText: '2022'
? ? ? ? ? ? ? ? }]
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? var yearListArr = [];
? ? ? ? ? ? ? ? for (var i = 0; i <= nowYearLength; i++) {
? ? ? ? ? ? ? ? ? ? var yearObj = {};
? ? ? ? ? ? ? ? ? ? yearObj.Index = i;
? ? ? ? ? ? ? ? ? ? yearObj.DText = parseInt(2022 + i);
? ? ? ? ? ? ? ? ? ? yearListArr.push(yearObj)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? this.yearlist = yearListArr
? ? ? ? ? ? }
? ? ? ? }
? ? }
? ? methods: {
? ? ? ? //年份筛选
? ? ? ? handleFilterYear(item) {
? ? ? ? ? ? this.serch1 = item.DText
? ? ? ? ? ? this.dataCount(); ? //调用数据列表的方法
? ? ? ? },
? ? ? ? // 月份筛选
? ? ? ? handleFilterMouth(item) {
? ? ? ? ? ? this.serch2 = item.DText
? ? ? ? ? ? this.dataCount(); ?//调用数据列表的方法
? ? ? ? },
? ? ? ? //清空查询
? ? ? ? searchClearFun() {
? ? ? ? ? ? this.serch1 = '' ?//清空年份
? ? ? ? ? ? this.serch2 = '' ?//清空月份
? ? ? ? ? ? this.dataCount() //调用数据列表的方法
? ? ? ? },
? ? }
}
</script>
<style scoped lang="scss">
? ?.block span {
? ? ? font-size: 15px;
? ? ? display: block;
? ? ? text-align: left;
? ? ? padding: 20px 0 0 20px;
? ? }
</style>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于Vue通过v-for实现年份自动递增的详细内容...