Vue.jsはカレンダー機能を実装します

{
  「コード」: 200,
  "メッセージ": "",
  "データ"： [{
      「時間」: 「2020-08-01」、
      "kqzl": "素晴らしい"
    },
    {
      「時間」: 「2020-08-02」、
      "kqzl": "良い"
    },
    {
      「時間」: 「2020-08-03」、
      "kqzl": "良い"
    }
  ]
}

<テンプレート>
  <div id="アプリ">
    <h1 スタイル="text-align:center;">
      2020-08</h1>
    <div class="カレンダーコンテナ">
      <div class="カレンダー週">
        <div class="cw-inner">
          <div class="cw-item"
               :style="{width: setItemWidth}"
               v-for="(item, index) 週"
               :key="インデックス">
            {{アイテム}}
          </div>
        </div>
      </div>
      <div class="カレンダー日">
        <div class="cd-list"
             v-for="(item, index) of day"
             :key="インデックス">
          <div class="cl-item"
               :style="{width: setItemWidth}"
               v-for="(子,インデックス) 項目"
               :key="インデックス"
               :class="[{has: child}]">
            <div class="ci-inner"
                 v-if="子">
              <span>{{child.date}}</span>
              <span v-if="child.text"
                    クラス="aqi"
                    :class="child.text.kqzl">
                {{child.text.kqzl}}
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
import kqzlData from './assets/data.json' // 空気質データのエクスポート デフォルト {
  名前: 'アプリ',
  データ（） {
    戻る {
      週： [
        '月曜日'、
        '火曜日'、
        '水曜日'、
        '木曜日'、
        '金曜日'、
        '土曜日'、
        '日曜日'、
      ]、
      日： []、
    }
  },
  計算: {
    setItemWidth() {
      100 / 7 + '%' を返す
    },
  },
  マウント() {
    this.createCalendar(2020, 8)
  },
  メソッド: {
    /**
     * @name: 日付のフォーマット * @param {date}
     */
    日付フォーマット(日付) {
      dateArr = date.split('-') とします。
      mounth = dateArr[1] >= 10 ? dateArr[1] : '0' + dateArr[1]とします。
      day = dateArr[2] >= 10 ? dateArr[2] : '0' + dateArr[2]とします。
      日付を返すArr[0] + '-' + 月 + '-' + 日
    },

    /**
     * @name: 日付情報 * @param {date}
     */
    getDayInfo(日付) {
      kqzl = kqzlData.data とします。
      formatDate = this.dateFormat(date) とします。
      txt = kqzl[kqzl.findIndex(item => item.time === formatDate)] とします。
      txt を返す
    },

    /**
     * @name: カレンダーテーブルを生成する * @param {year}
     * @param {マウントh}
     */
    createCalendar(年, 月) {
      // 一ヶ月には何日あるか let allDay = new Date(year, mounth, 0).getDate()
      // 月の 1 日は何曜日か let firstDay = this.judjeFirstDay(year, mounth)
      // 表示に必要な行数 let row = Math.ceil((allDay + firstDay) / 7)
      k = firstDay - 1 とします。
      結果 = []
      カウントを1にする
      // カレンダーの2次元配列を生成する for (let i = 0; i < row; i++) {
        結果[i] = 新しい配列(7)
        する {
          カウント <= allDay の場合 {
            結果[i][k] = {
              日付: カウント、
              // インターフェーステキストに従って日付に対応する情報を一致させます: this.getDayInfo(year + '-' + mounth + '-' + count),
            }
            キロ++
            カウント++
          } それ以外 {
            壊す
          }
        } （k < 7）の場合
        0 = 0 です
      }
      this.day = 結果
    },

    /**
     * @name: ある月の 1 日が何曜日であるかを決定します* @param {year}
     * @param {マウントh}
     */
    judjeFirstDay(年, 月) {
      date = new Date(年, 月 - 1, 1) とします。
      week = date.getDay() とします。
      weekArr = [1, 2, 3, 4, 5, 6, 7]とします。
      weekArr[週 - 1]を返す
    },
  },
}
</スクリプト>

<スタイル lang="scss">
.カレンダーコンテナ{
  テキスト配置: 中央;
  .calendar-week {
    下マージン: 4px;
    パディング: 0 4px;
    色: #fff;
    .cw-インナー{
      オーバーフロー: 非表示;
      背景: #a0a0a0;
      .cw-アイテム {
        フロート: 左;
        パディング: 8px 0;
      }
    }
  }
  .カレンダー日{
    .cd-リスト{
      オーバーフロー: 非表示;
      .cl-item {
        フロート: 左;
        最小高さ: 30px;
        ボックスのサイズ: 境界線ボックス;
        パディング: 4px;
        .ci-インナー{
          背景: #f5f5f5;
          パディング: 8px 0;
          スパン {
            表示: インラインブロック;
            &.aqi {
              色: #fff;
              背景: #a7cf8c;
              パディング: 0 4px;
              境界線の半径: 4px;
            }
            ＆。素晴らしい{
              背景: #a7cf8c;
            }
            ＆。良い{
              背景: #f7da64;
            }
            ＆。 軽度 {
              背景: #f29e39;
            }
            ＆。適度
              背景: #da555d;
            }
            ＆。厳しい
              背景: #b9377a;
            }
            ＆。深刻な{
              背景: #881326;
            }
          }
        }
      }
    }
  }
}
</スタイル>