vue根据选择的月份动态展示当前月份的每一天并展示每一天所对应的星期几 (2)

当然,我们还可以不展示每一天对应的是星期几,只将每周的周六周日所对应的那两天给标红展示,代码只是做了一点小修改:

<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>

展示效果如下:

vue根据选择的月份动态展示当前月份的每一天并展示每一天所对应的星期几

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wspzyy.html