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

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

本日実装する機能は、以下の機能です。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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue ビデオ再生用の vue-video-player プラグインの使用方法
  • Vue で Lodop プラグインを使用して印刷機能を実装する簡単な方法
  • Vueページングプラグインの使い方
  • Vue WeChat共有プラグインの使い方の詳しい説明
  • vue プロジェクトで vue-layer 箇条書きボックス プラグインを使用する方法
  • vue で jsonp プラグインを使用する例
  • Vue画像切り抜きプラグインvue-cropperの使い方を詳しく説明します
  • Vueプラグインの使用法の詳細な共有

<<:  mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル

>>:  Win10 での MySQL 8.0.20 のインストールと設定のチュートリアル

推薦する

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト

ウェブ上でチャートを描くための 9 つの優れた JavaScript フレームワーク スクリプト 1...

JavaScript のシングルトン デザイン パターン

目次1. デザインパターンとは何ですか? 2. デザインパターンの5つの設計原則(SOLID) 3....

Linux 上でプライベート Git サーバーを構築するための詳細なチュートリアル

1. サーバーのセットアップリモート リポジトリは実際にはローカル リポジトリと何ら変わりなく、純粋...

jsはカスタムドロップダウンボックスを実装します

この記事の例では、カスタムドロップダウンボックスを実装するためのjsの具体的なコードを参考までに共有...

MySQL 8.0.21 無料インストール版 設定方法 グラフィックチュートリアル

MySQLをインストールする6つの手順(インストールパッケージのみがインストール場所を選択できます)...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

ウェブページのテキストデザインは、服を着た賢い女の子のようであるべきだ

<br />「この世に醜い女性はいない、あるのは怠惰な女性だけだ」これは女性の美のバイブ...

Nginx 外部ネットワーク アクセス イントラネット サイト構成操作

背景:サイトはフロントエンドとバックエンドから分離されています: vue+springbootフロン...

Windows ベースの MySQL 8.0.12 のインストール

このチュートリアルは Windows システムにのみ適用されます。インストールしたがまだインストール...

CSSを使用してファイルアップロードパターンを描画する

以下に示すように、あなたならどのようにそれを達成しますか: 通常、フォントアイコンを使用して中央にプ...

MySql が常に mySqlInstallerConsole ウィンドウをポップアップする問題の解決策

MySql は常に MySQLInstallerConsole.exe ウィンドウを定期的にポップア...

Linux Bash スクリプトを使用してユーザーを識別する方法の例

多くの場合、bash スクリプト内またはスクリプト自体内で直接 sudo を使用してコマンドを実行す...

Html+CSS フローティング広告ストリップの実装

1.html部分コードをコピーコードは次のとおりです。 <!DOCTYPE html> ...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...