例子如下:
HTML:
<viewstyle="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: '',