本日実装する機能は、以下の機能です。vue.js シミュレーションカレンダープラグイン さて、もう無駄な話はやめて、早速コードを見てみましょう css: *{ マージン: 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{ 色:赤; } html: <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> js: 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 を返します。 } } }) 注意: 適切に実行するには、まずローカルの vue.js ファイルをインポートする必要があります。 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル
>>: Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル
ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...
目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....
1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...
この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...
MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...
HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...
<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...
背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...
このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...
以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...
MySql は常に MySQLInstallerConsole.exe ウィンドウを定期的にポップア...
多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...
1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...