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>

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