例子如下:
HTML:
<view style="margin-top: 3%;width: 100%;height: 10vh;display: flex;justify-content: space-around;"> <div v-for="(item,index) in same_week" :class="[same_day==item.date? 'activ' :'','dis']" @click="select(item)" :key='index'> <span style="font-weight: 600;margin-top: 5%;">{{item.week}}</span> <br> <view style="width:30px;height: 30px;border-radius: 50%;border: none;background-color: #EFEFEF;text-align: center;display: flex;justify-content: center;align-items: center;margin-top: 20%;font-size: 12px;">{{item.name}}</view> </div>
js 生命周期执行:
created() { // 默认显示当天前一周的数据 let data = [] this.start = this.getDay(+7); this.end = this.getDay(); for (let i = 6; i >= 0; i--) { data.push(this.getDay(+i)) } var date = data.reverse() this.week = date; var date = this.week; var pkc = []; var weekday = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]; date.forEach((item, index) => { //循坏日期 var f = new Date(item); var week = f.getDay() //计算出星期几 var str1 = item.split('/'); var strs = str1[2]; var weeks = weekday[week] var time = Math.round(new Date(item) / 1000) var s = {} //用于存储每个日期对象 s.date = item; s.name = strs; s.week = weeks; s.times = time; pkc.push(s) }) this.same_week = pkc; this.same_day = pkc[0].date; },
methods:事件
getDay(day) { var today = new Date(); var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day; today.setTime(targetday_milliseconds); var tYear = today.getFullYear(); var tMonth = today.getMonth(); var tDate = today.getDate(); tMonth = this.doHandleMonth(tMonth + 1); tDate = this.doHandleMonth(tDate); return tYear + "/" + tMonth + "/" + tDate; }, doHandleMonth(month) { var m = month; if (month.toString().length == 1) { m = month; } return m; }, // },
return:
week: [], same_week: [], same_day: '',