Vue通過v-for實現(xiàn)年份自動遞增

更新時間：2022年09月01日 10:38:13 作者：小貓喵了個咪噠~

這篇文章主要為大家詳細介紹了Vue通過v-for實現(xiàn)年份自動遞增，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Vue篩選時通過 v-for 實現(xiàn)年份自動遞增，供大家參考，具體內(nèi)容如下

在做數(shù)據(jù)篩選時一般會用到Element-UI組件的方式進行編寫，偶爾也會用平鋪的方式對時間進行篩選(類似購物網(wǎng)站的篩選功能)，并實現(xiàn)年份的自動增加

以下是用平鋪的方式對數(shù)據(jù)篩選 (已省略表格)
部分解釋的可能不太清楚，但也可以實現(xiàn)的

效果圖如下

當年份為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(); ? //調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? ? ? // 月份篩選
? ? ? ? handleFilterMouth(item) {
? ? ? ? ? ? this.serch2 = item.DText
? ? ? ? ? ? this.dataCount(); ?//調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? ? ? //清空查詢
? ? ? ? searchClearFun() {
? ? ? ? ? ? this.serch1 = '' ?//清空年份
? ? ? ? ? ? this.serch2 = '' ?//清空月份
? ? ? ? ? ? this.dataCount() //調(diào)用數(shù)據(jù)列表的方法
? ? ? ? },
? ? }
}
</script>
<style scoped lang="scss">
? ?.block span {
? ? ? font-size: 15px;
? ? ? display: block;
? ? ? text-align: left;
? ? ? padding: 20px 0 0 20px;
? ? }
</style>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: