Vueは、選択した月に応じて日付に対応する曜日を動的に表示します。

私たち謙虚なプログラマーは、今でもこう歌わなければなりません。「あなたも私も、この世に生まれて、一日中忙しく、一瞬の休息もない人間です。私たちは不死ではないので、雑念にとらわれてしまいます。私たちは心配事を脇に置いて、給料を真ん中に置きます。保険に加入せずに昼夜を問わず残業しているハゲで太った男が何人いるでしょうか。」

抵抗し続けてきたが、一度も効果がなかった。大物上司にとっては夢が叶うのに、我々にとっては我々の夢が非難される原因になるのです！

苦情が山ほどあったにもかかわらず、私はまだ責任を負い、残業して、コーディングを続けなければなりません。！！

さあ、タイトルに書いた効果を実現しましょう。

原理は実はとてもシンプルです。まず、年と月を選択するための入力ボックスが必要です。ここでは、Element の DatePicker 日付セレクターコンポーネントを使用します。使い方の詳細については説明しません。Element の API を自分で調べてください。

次に、選択した月に応じて、現在の月の各日が動的に表示されます。ここでは、日付オブジェクトの 2 つのメソッド、setMonth と setDate が使用されます。

月を設定するには、setMonth(month, day) メソッドを使用します。パラメータは次のように記述されます。
月: 必須。月を表す数値。0 (1 月) から 11 (12 月) まで。
日: オプション。現地時間で月の日を表す 1 ～ 31 の数値。 EMCAScript が標準化される前は、このパラメータはサポートされていませんでした。

setDate(day) メソッドは、月の日を設定するために使用されます。パラメータは次のとおりです。
日: 必須。月の日付を表す数値 (1 ～ 31)。

具体的なコードは次のとおりです。

<テンプレート>
 <div>
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="月を選択" />
  <p>
   月の各日:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;">{{item}}</span>
  </p>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ（） {
  戻る {
   月： ""、
   毎日: []
  };
 },
 マウントされた(){
  date = new Date()、month = date.getMonth(); とします。
  this.getEveryDay(日付、月);
 },
 メソッド: {
  月変更(日付) {
   日付を取得します。
  },
  getEveryDay(日付、月) {
   //月を設定します date.setMonth(month + 1);
   // 月の日付を設定します - ゼロに設定すると、日付の日付は月の最終日になります (たとえば、2 月は 28 または 29、他の月は 30 または 31)。これは、次のループ date.setDate(0); に便利です。
   dayArry = [] とします。
   // 月の日付を取得します。let day = date.getDate();

   (i = 1; i <= day; i++ とします) {
    date.setDate(i); // 現在選択されている月のすべての日だけを取得したい場合は、date.setDate(i) は必要ありません。dayArry.push(i) のみで十分です。date.setDate(i) は現在の月のすべての日を設定します。dayArry.push(i + ' ' + this.getWeekday(date.getDay())); // 選択した月のすべての日と曜日}

   this.everyDay = dayArry;
  },
  getWeekday(曜日){
   ["日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日"][day] を返します。
  },
 }
};
</スクリプト>

表示効果は以下のとおりです。

getMonth メソッドによって返される値は 0 から始まるため、正しい月を取得するには、返された値に 1 を加算する必要があることに注意してください。 setDate には特別な点があり、詳しく説明する必要があります。setDate は、月の特定の日を設定するために使用されます。たとえば、setDate(1) は月の最初の日を設定し、setDate(10) は月の 10 日目を設定します。しかし、よく知られている理由により、1 か月は 28 日、29 日、30 日、または 31 日になる場合があります。自分で判断するコードを記述すると、面倒すぎます。このとき、setDate(0) のすばらしさが明らかになります (公式の setDate パラメーターは 1 から 31 の間で、0 は無慈悲に放棄されます。このとき、リン兄弟は悲しげに歌っています: 無慈悲な世界、無慈悲なあなた、あなたは私をあなたの手の中のゴミのように扱います)。setDate(0) は、この日が 28、29、30、または 31 のいずれであっても、月の最終日に設定され (リン兄弟はこのとき叫びました: あなたは前は私を無視していましたが、今は私に余裕がありません!)、次に getDate メソッドを使用して、設定した月の最終日を取得します。最後に、for ループを配置し、各日を配列に入れて、1 日を終えることができます。

もちろん、各曜日に対応する曜日を表示せず、土曜日と日曜日に対応する 2 日間だけを赤で表示することもできます。コードには、少し変更を加えるだけで済みます。

<テンプレート>
 <div style="margin:50px;">
  <el-date-picker v-model="month" type="month" @change="monthChange" placeholder="月を選択" />
  <p style="margin-top:10px;">
   月ごとの各日:
   <span v-for="item in everyDay" :key="item" style="margin-right:10px;" v-html="item"></span>
  </p>
 </div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
 データ（） {
  戻る {
   月： ""、
   毎日: []
  };
 },
 マウントされた(){
  date = new Date(), month = date.getMonth(); とします。
  this.getEveryDay(日付、月);
 },
 メソッド: {
  月変更(日付) {
   日付を取得します。
  },
  getEveryDay(日付、月) {
   //月を設定します date.setMonth(month + 1);
   // 月の日付を設定します - ゼロに設定すると、日付の日付は月の最終日になります (たとえば、2 月は 28 または 29、他の月は 30 または 31)。これは、次のループ date.setDate(0); に便利です。
   dayArry = [] とします。
   // 月の日付を取得します。let day = date.getDate();

   (i = 1; i <= day; i++ とします) {
    日付を設定します。
    date.getDay() == 0 || date.getDay() == 6 の場合{
     dayArry.push('<i class="red">' + i + '</i>');
    }それ以外{
     dayArry.push(i);
    }
   }

   this.everyDay = dayArry;
  },
 }
};
</スクリプト>
<スタイル>
.red{色:赤;フォントスタイル:通常;}
</スタイル>

表示効果は以下のとおりです。