基于Vue的小日历（支持按周切换）

 

 基于Vue的日历小功能，可根据实际开发情况按每年、每月、每周、进行切换

<template>
  <div class="date">
      
      <div class="month">
        <p>{{ currentYear }}年{{ currentMonth }}月p>
      div>
      
      <ul class="weekdays">
        <li>一li>
        <li>二li>
        <li>三li>
        <li>四li>
        <li>五li>
        <li>六li>
        <li>日li>
      ul>
      
      <ul class="days">
        <li @click="pick(day)" v-for="(day, index) in days" :key="index">
          
          <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}span>
          <span v-else>
          
          <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}span>
          <span v-else>{{ day.getDate() }}span>
          span>
        li>
      ul>
  div>
template>

 

js部分：目前默认显示一周，可根据实际情况更改

 

 

相关参考链接；http://www.jb51.net/article/96402.htm

转载于:https://www.cnblogs.com/zhengweijie/p/7289764.html