vue手写年月日时间三级联动

1. 思路部分
   1. 确定年份的范围
   2. 确定月份的范围
   3. 根据年月来确定具体的天数，特别是闰年和平年的二月份
2. 代码部分

<!-- 年 -->
<select class="col-md-2" v-model="year">
    <option selected="selected" v-for="item in yearlist" :key="item.id" :value="item">                
        {{item}}
    </option>
</select>

<!-- 月 -->
<select class="col-md-2" v-model="month" @change="changeMonth">
    <option selected="selected" v-for="item in monthlist" :key="item.id" :value="item">    
        {{item}}
    </option>
</select>

<!-- 日 -->
<select class="col-md-2" v-model="day">
    <option  selected="selected" v-for="item in daylist" :key="item.id" :value="item">                            
        {{item}}
    </option>
</select>

export default{
    data(){
        return{
            year:2019,
            month:1,
            day:31,
            yearlist:[],
            monthlist:[],
            daylist:[],
        }
    }

}

 

 

//  循环年
//  可以给定自己想要年份的范围，我这里给的是现在年份的后十年
       initYearList(){
            var a = new Date()
            var year = a.getFullYear()
            for (var i =0;i<=10;i++){
                this.yearlist[i] = year + i
            }
            // console.log(this.yearlist)
        },

 

 //循环月
 //一年只有12个月  没有特别的
        initMonthList(){
            var b = new Date()
            this.month = b.getMonth()+1
            this.check(this.month)
            for(var i=0;i<this.day;i++){
                this.daylist[i] = i+1
            }
            for(var i=0;i<12;i++){
                this.monthlist[i] = i+1
            }
        },

 

//月份改变时
        changeMonth(){
            this.daylist = []
            var a =this.month
            this.check(a)
            for(var i=0;i<this.day;i++){
                this.daylist[i] = i+1
            }
        },

// 这里是一个判断月份返回相应天数的函数
check(a){
            if(a==1||a==3||a==5||a==7||a==8||a==10||a==12){
                return this.day=31
            }else if(a==4||a==6||a==11||a==9){
                return this.day=30
            }else if(a==2){
                if(this.year%4==0 && (this.year%100!=0||this.year%400 ==0)){
                    return this.day=29
                }else{
                    return this.day=28
                }
            }
        }

 

 差不多一个简单的三级联动就这些啦。