当然,我们还可以不展示每一天对应的是星期几,只将每周的周六周日所对应的那两天给标红展示,代码只是做了一点小修改:
<template> <div> <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="选择月" /> <p> 当月的每一天: <span v-for="item in everyDay" :key="item" v-html="item"></span> </p> </div> </template> <script> export default { data() { return { month: "", everyDay: [] }; }, mounted(){ let date = new Date(), month = date.getMonth(); this.getEveryDay(date, month); }, methods: { monthChange(date) { this.getEveryDay(date, date.getMonth()); }, getEveryDay(date, month) { //设置月份 date.setMonth(month + 1); //设置一个月的某一天-这里设置为零则取到的日期中的天就会是当月的最后一天(比如,二月份就是28或29,其他月份就是30或31),方便下边的循环 date.setDate(0); let dayArry = []; //获取月份的某一天 let day = date.getDate(); for (let i = 1; i <= day; i++) { date.setDate(i); if(date.getDay() == 0 || date.getDay() == 6){ dayArry.push('<i>' + i + '</i>'); }else{ dayArry.push(i); } } this.everyDay = dayArry; }, } }; </script> <style> .red{color:red;font-style:normal;} </style>展示效果如下: