Vue.jsで実装されたカレンダープラグインの使い方を詳しく説明します

*{
     マージン: 0;
     パディング: 0;
     -webkit-box-sizing: 境界線ボックス;
     -moz-box-sizing: 境界線ボックス;
     ボックスのサイズ: 境界線ボックス;
        }
        ＃アプリ{
            幅: 1000ピクセル;
            マージン: 10px 自動;
        }
        .カレンダー{
            幅: 1000ピクセル;
        }
        .カレンダーテーブル{
            幅: 1000ピクセル;
        }
        .calender テーブル,th,tr,td{
            境界線:1px 実線 #333333;
            境界線の折りたたみ: 折りたたみ;
        }
        .calender td{
            高さ: 100px;
            垂直方向の位置合わせ: 上;
            テキスト配置: 左;
            パディング: 5px 0 0 5px;
            フォントサイズ: 13px;
        }
        .calender td.cur{
            色：赤;
        }

<div id="アプリ">
    <div class="カレンダー">
        <テーブル>
            <キャプション>
                <v-model.number="年" を選択">
                    <option v-for="i of 490">{{i+1969}}</option>
                </選択>
                <v-model.number="月" を選択">
                    <option v-for="i of 12">{{i}}</option>
                </選択>
            </caption>
            <頭>
            <tr>
                <th>日曜日</th>
                <th>月曜日</th>
                <th>火曜日</th>
                <th>水曜日</th>
                <th>木曜日</th>
                <th>金曜日</th>
                <th>土曜日</th>
            </tr>
            </thead>
            <t本文>
            <!-- インデックスは 0 から始まり、i は 1 から始まります -->
            <tr v-for="(a,index) カレンダーの長さ / 7" >
                <td v-for="i of 7" :class="{cur:calender[index * 7 + (i - 1)].cur }">{{calender[index * 7 + (i - 1)].fullDay}}</td>
            </tr>
            </tbody>
        </テーブル>
    </div>
</div>

var vm = 新しい Vue({
        el:'#app',
        データ：{
            年:2018,
            月:1
        },
        計算:{
            カレンダー(){
                var arr = [];

                //新しいデータには 3 つのパラメーターがあります: 1. 年 2. 月 3. デフォルトは 1 です。0 の場合は、前月の最終日 (最初の 2 日間) 3 明後日を意味します。var nowMonthLength = new Date(this.year,this.month,0).getDate();
                var nowMonthFirstWeek = new Date(this.year,this.month-1).getDay();
                var lastMonthLength = new Date(this.year,this.month-1,0).getDate();
                console.log('今月は次のようになります:' + nowMonthLength);
                console.log('今月の最初の日' + nowMonthFirstWeek);
                console.log('先月の長さ' + lastMonthLength);

                // this.month = parseInt(this.month);
                //各月の前月はどの月でしょうか? var pmonth = this.month == 1 ? 12 : this.month - 1;
                //前年 var pyear = this.month == 1 ? this.year - 1 :this.year;
                //次の月 var nmonth = this.month == 12 ? 1 : this.month + 1;
                //次の月 var nyear = this.month == 12 ? this.year + 1 : this.year;
                //ゼロ埋め関数 // function toTwo(n) {
                // n < 10 ? '0' + n : n を返します。
                // }
                関数ビルド(n) {
                    n.toString().length > 1 を返します ? n.toString() : '0' + n.toString();
                }
                // 先月の最後の数日を追加します while(nowMonthFirstWeek--){
                    arr.unshift({
                        日:先月の長さ、
                        現在の値:true、
                        フルデイ:`${pyear}-${buling(pmonth)}-${buling(lastMonthLength)}`
                    });
                    先月の長さ--
                }
                コンソールにログ出力します。

                //今月の日数 var _a = 1;
                while(nowMonthLength--){
                    arr.push({
                        日:_a、
                        偽:
                        フルデイ:`${this.year}-${buling(this.month)}-${buling(_a)}`
                    });
                    _a++
                }

                //翌月に完了 var nextLength = arr.length > 35 ? 42 - arr.length : 35 - arr.length;
                _a = 1;
                while (nextLength--){
                    arr.push({
                        日:_a、
                        現在の値:true、
                        フルデイ:`${nyear}-${buling(nmonth)}-${buling(_a)}`
                    });
                    _a++
                }
                arr を返します。
            }
        }
    })