渲染日历，点击日期设置样式（利用数组的indexOf()方法）

  1 <template>
  2   <div class="container">
  3     <!-- 日历 -->
  4     <div style="padding: 20px;">
  5       <el-button @click="setDate">设置日期</el-button>
  6       <ul>
  7         <li v-for="(item, index) in this.calendarData" :key="item.monthId">
  8           <h5>{{item.monthId}}</h5>
  9           <div class="item_label">
 10             <span>日</span>
 11             <span>一</span>
 12             <span>二</span>
 13             <span>三</span>
 14             <span>四</span>
 15             <span>五</span>
 16             <span>六</span>
 17           </div>
 18           <div class="item_list">
 19             <!-- 根据字段weekDesc 判断每月第一天是周几，前面空几个空格 -->
 20             <p
 21               v-for="(item2, index2) in item.dateList[0].weekDesc*1 === 7 ? 0 : item.dateList[0].weekDesc*1"
 22               :key="index2"
 23             ></p>
 24             <!-- 循环月，每月的天数即为i+1 -->
 25             <span
 26               ref="spanStyle"
 27               v-for="(item1, i) in item.dateList"
 28               :key="item1.dayId"  
 29               :id="setStyle(item1)"
 30               :class="{‘active‘:vallist.indexOf(item1)>-1}"
 31               @click="clickEvents(item1, index, i)"
 32             >{{ i + 1 }}</span>
 33           </div>
 34         </li>
 35       </ul>
 36     </div>
 37   </div>
 38 </template>
 39 
 40 <script>
 41 import calendarData from ‘./data.json‘
 42 export default {
 43   data() {
 44     return {
 45       calendarData: JSON.parse(JSON.stringify(calendarData.data)), //2020年数据，渲染日历
 46       indexList: [],
 47       vallist: []
 48     }
 49   },
 50   created() {},
 51   methods: {
 52     //根据当前天的字段设置样式,设置id名，工作日，休息日，节假日分别是3种颜色, 还有已经过去的为灰色不可点击
 53     setStyle(item) {
 54       //获取当前面年月日，设置当前 （以后写代码认真一点ok？小细节的地方一定要认真一点）
 55       var date = new Date()
 56       var year = date.getFullYear()
 57       var month = date.getMonth() + 1 < 10 ? ‘0‘ + (date.getMonth() + 1) : date.getMonth() + 1
 58       var day = date.getDate() < 10 ? ‘0‘ + date.getDate() : date.getDate()
 59       var todayDate = `${year}-${month}-${day}`
 60       
 61       if (item.dayId === todayDate) {
 62         return ‘today‘
 63       } else if (item.overFlag === ‘0‘) {
 64         return ‘grey‘
 65       } else if (item.dayType === ‘2‘) {
 66         return ‘red‘
 67       } else if (item.dayType === ‘3‘) {
 68         return ‘blue‘
 69       }
 70     },
 71     //点击日期，得到当前选中的这一项（val）,并将它选中的设置类名active,可以多选，再次点击取消选择，并将选中的每一项val，push到一个数组里
 72     clickEvents(val, i1, i) {
 73       //let arrIndex = this.indexList.indexOf(i1 + ‘-‘ + i)
 74       let arrIndex = this.vallist.indexOf(val)
 75       console.log(arrIndex)
 76       if (arrIndex === -1) {
 77         //this.indexList.push(i1 + ‘-‘ + i)
 78         this.vallist.push(val)
 79       } else {
 80         //this.indexList.splice(arrIndex, 1)
 81         this.vallist.splice(arrIndex, 1)
 82       }
 83       //console.log(this.indexList)
 84       console.log(this.vallist)
 85     },
 86     setDate() {
 87       console.log(this.vallist)
 88       var dayIds = []
 89       this.vallist.forEach(item => {
 90         dayIds.push(item.dayId)
 91       });
 92       console.log(dayIds.join(‘,‘))
 93     }
 94   }
 95 }
 96 </script>
 97 
 98 <style lang="less" scoped>
 99 * {
100   margin: 0;
101   padding: 0;
102 }
103 .active {
104   background-color: brown !important;
105   border-radius: 3px;
106   color: white !important;
107 }
108 #today {
109   background-color: #409eff;
110   border-radius: 3px;
111   color: white;
112 }
113 #grey {
114   color: gray !important;
115   pointer-events: none;
116 }
117 #blue {
118   color: rgb(49, 134, 245);
119 }
120 #red {
121   color: brown;
122 }
123 
124 ul,
125 li {
126   list-style-type: none;
127 }
128 
129 ul {
130   height: 100%;
131   width: 100%;
132   display: flex;
133   flex-wrap: wrap;
134   li {
135     border: 1px solid grey;
136     width: 23%;
137     box-sizing: border-box;
138     margin: 10px;
139     h5 {
140       text-align: center;
141       height: 40px;
142       line-height: 40px;
143       font-size: 15px;
144       color: grey;
145     }
146     .item_label,
147     .item_list {
148       display: flex;
149       flex-wrap: wrap;
150       p {
151         width: 14.285%;
152         height: 30px;
153       }
154       span {
155         display: block;
156         box-sizing: border-box;
157         width: 14.285%;
158         height: 30px;
159         line-height: 30px;
160         text-align: center;
161       }
162       span:hover {
163         cursor: pointer;
164       }
165     }
166   }
167 }
168 
169 .serach {
170   height: 33px;
171   width: 58px;
172 }
173 .container-moddle {
174   padding: 20px;
175   padding-bottom: 0;
176   .el-button--danger {
177     height: 33px;
178     width: 80px;
179   }
180 }
181 </style>