Vue.js でカレンダーのカレンダー効果を作成
Vue.js を使用してデータとビューをバインドします。Android の DataBinding と同様に、データの更新によりビューが自動的に更新されます。
HTMLカレンダー効果を実装します。
htmlの部分
<p id="calendar"> <!-- 年份 月份 --> <p class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> <li class="year-month" @click="pickYear(currentYear,currentMonth)"> <span class="choose-year">{{ currentYear }}</span> <span class="choose-month">{{ currentMonth }}月</span> </li> <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li> </ul> </p> <!-- 星期 --> <ul class="weekdays"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li style="color:red">六</li> <li style="color:red">日</li> </ul> <!-- 日期 --> <ul class="days"> <li @click="pick(day)" v-for="day in days"> <!--本月--> <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span> <span v-else> <!--今天--> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </p>
idは、カレンダーに対応するVueオブジェクトを作成し、elを「#calendar」に設定します。
<script type="text/javascript"> new Vue({ el: '#calendar', data: { currentDay: 1, currentMonth: 1, currentYear: 1970, currentWeek: 1, days: [], }, created: function() { this.initData(null); }, methods: { initData: function(cur) { var date; if (cur) { date = new Date(cur); } else { date = new Date(); } this.currentDay = date.getDate(); this.currentYear = date.getFullYear(); this.currentMonth = date.getMonth() + 1; this.currentWeek = date.getDay(); // 1...6,0 if (this.currentWeek == 0) { this.currentWeek = 7; } var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay); console.log("today:" + str + "," + this.currentWeek); this.days.length = 0; // 今天是周日,放在第一行第7个位置,前面6个 for (var i = this.currentWeek - 1; i >= 0; i--) { var d = new Date(str); d.setDate(d.getDate() - i); console.log("y:" + d.getDate()); this.days.push(d); } for (var i = 1; i <= 35 - this.currentWeek; i++) { var d = new Date(str); d.setDate(d.getDate() + i); this.days.push(d); } }, pick: function(date) { alert(this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate())); }, pickPre: function(year, month) { // setDate(0); 上月最后一天 // setDate(-1); 上月倒数第二天 // setDate(dx) 参数dx为 上月最后一天的前后dx天 var d = new Date(this.formatDate(year , month , 1)); d.setDate(0); this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1)); }, pickNext: function(year, month) { var d = new Date(this.formatDate(year , month , 1)); d.setDate(35); this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1)); }, pickYear: function(year, month) { alert(year + "," + month); }, // 返回 类似 2016-01-02 格式的字符串 formatDate: function(year,month,day){ var y = year; var m = month; if(m<10) m = "0" + m; var d = day; if(d<10) d = "0" + d; return y+"-"+m+"-"+d }, }, }); </script>
完全なコード:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日历</title> <style type="text/css"> * { box-sizing: border-box; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; background: #E8F0F3; } #calendar{ width:80%; margin: 0 auto; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12); } .month { width: 100%; background: #00B8EC; } .month ul { margin: 0; padding: 0; display: flex; justify-content: space-between; } .year-month { display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .year-month:hover { background: rgba(150, 2, 12, 0.1); } .choose-year { padding-left: 20px; padding-right: 20px; } .choose-month { text-align: center; font-size: 1.5rem; } .arrow { padding: 30px; } .arrow:hover { background: rgba(100, 2, 12, 0.1); } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .weekdays { margin: 0; padding: 10px 0; background-color: #00B8EC; display: flex; flex-wrap: wrap; color: #FFFFFF; justify-content: space-around; } .weekdays li { display: inline-block; width: 13.6%; text-align: center; } .days { padding: 0; background: #FFFFFF; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-around; } .days li { list-style-type: none; display: inline-block; width: 14.2%; text-align: center; padding-bottom: 15px; padding-top: 15px; font-size: 1rem; color: #000; } .days li .active { padding: 6px 10px; border-radius: 50%; background: #00B8EC; color: #fff; } .days li .other-month { padding: 5px; color: gainsboro; } .days li:hover { background: #e1e1e1; } </style> </head> <body> <h1 id="CSS-nbsp-日历">CSS 日历</h1> <p id="calendar"> <p class="month"> <ul> <li class="arrow" @click="pickPre(currentYear,currentMonth)">❮</li> <li class="year-month" @click="pickYear(currentYear,currentMonth)"> <span class="choose-year">{{ currentYear }}</span> <span class="choose-month">{{ currentMonth }}月</span> </li> <li class="arrow" @click="pickNext(currentYear,currentMonth)">❯</li> </ul> </p> <ul class="weekdays"> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li style="color:red">六</li> <li style="color:red">日</li> </ul> <ul class="days"> <li @click="pick(day)" v-for="day in days"> <!--今天--> <span v-if="day.getMonth()+1 != currentMonth" class="other-month">{{ day.getDate() }}</span> <span v-else> <!--今天--> <span v-if="day.getFullYear() == new Date().getFullYear() && day.getMonth() == new Date().getMonth() && day.getDate() == new Date().getDate()" class="active">{{ day.getDate() }}</span> <span v-else>{{ day.getDate() }}</span> </span> </li> </ul> </p> <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.18/vue.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#calendar', data: { currentDay: 1, currentMonth: 1, currentYear: 1970, currentWeek: 1, days: [], }, created: function() { this.initData(null); }, methods: { initData: function(cur) { var date; if (cur) { date = new Date(cur); } else { date = new Date(); } this.currentDay = date.getDate(); this.currentYear = date.getFullYear(); this.currentMonth = date.getMonth() + 1; this.currentWeek = date.getDay(); // 1...6,0 if (this.currentWeek == 0) { this.currentWeek = 7; } var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay); console.log("today:" + str + "," + this.currentWeek); this.days.length = 0; // 今天是周日,放在第一行第7个位置,前面6个 for (var i = this.currentWeek - 1; i >= 0; i--) { var d = new Date(str); d.setDate(d.getDate() - i); console.log("y:" + d.getDate()); this.days.push(d); } for (var i = 1; i <= 35 - this.currentWeek; i++) { var d = new Date(str); d.setDate(d.getDate() + i); this.days.push(d); } }, pick: function(date) { alert(this.formatDate( date.getFullYear() , date.getMonth() + 1, date.getDate())); }, pickPre: function(year, month) { // setDate(0); 上月最后一天 // setDate(-1); 上月倒数第二天 // setDate(dx) 参数dx为 上月最后一天的前后dx天 var d = new Date(this.formatDate(year , month , 1)); d.setDate(0); this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1)); }, pickNext: function(year, month) { var d = new Date(this.formatDate(year , month , 1)); d.setDate(35); this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1)); }, pickYear: function(year, month) { alert(year + "," + month); }, // 返回 类似 2016-01-02 格式的字符串 formatDate: function(year,month,day){ var y = year; var m = month; if(m<10) m = "0" + m; var d = day; if(d<10) d = "0" + d; return y+"-"+m+"-"+d }, }, }); </script> </body> </html>
上記は、Vue.js を使用して Calendar カレンダーエフェクトを作成する内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











Vue フレームワークを使用してフロントエンド プロジェクトを開発する場合、デプロイ時に複数の環境をデプロイすることになりますが、開発環境、テスト環境、オンライン環境で呼び出されるインターフェイス ドメイン名が異なることがよくあります。どうすれば区別できるでしょうか?それは環境変数とパターンを使用することです。

Ace は、JavaScript で書かれた埋め込み可能なコード エディターです。 Sublime、Vim、TextMate などのネイティブ エディターの機能とパフォーマンスに匹敵します。あらゆる Web ページや JavaScript アプリケーションに簡単に埋め込むことができます。 Ace は Cloud9 IDE のメイン エディタとして維持されており、Mozilla Skywriter (Bespin) プロジェクトの後継です。

コンポーネント化とモジュール化の違い: モジュール化はコード ロジックの観点から分割され、コードの階層化された開発が容易になり、各機能モジュールの機能の一貫性が保証されます。コンポーネント化は UI インターフェイスの観点から計画され、フロントエンドのコンポーネント化により UI コンポーネントの再利用が容易になります。

Vue.js は、今日のフロントエンド開発において非常に人気のあるフレームワークとなっています。 Vue.js が進化し続けるにつれて、単体テストの重要性がますます高まっています。今日は、Vue.js 3 で単体テストを作成する方法を検討し、いくつかのベスト プラクティスと一般的な問題と解決策を提供します。

前書き: vue3 の開発では、reactive は応答性の高いデータを実装するメソッドを提供します。これは日常の開発で頻繁に使用される API です。この記事では、著者はその内部動作メカニズムを探ります。

Vue.js では、開発者は、JSX 構文とテンプレート構文という 2 つの異なる構文を使用してユーザー インターフェイスを作成できます。どちらの構文にもそれぞれ長所と短所があるので、それらの違い、長所と短所について説明します。

Vue3 動的コンポーネントで例外を処理するにはどうすればよいですか?次の記事では、Vue3 の動的コンポーネントの例外処理方法について説明します。

現在の Vue バージョンを照会するには 2 つの方法があります: 1. cmd コンソールで、「npm list vue」コマンドを実行してバージョンを照会します。出力結果は Vue のバージョン番号情報です。2. パッケージを見つけて開きます。プロジェクト内のjsonファイルを検索して「依存関係」の項目でvueのバージョン情報が確認できます。
