この記事では、フィルターを使用して日付をフォーマットするVueの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 ケース要件ケーススタディ1. フィルタリングされていないフォーマットされた日付形式を表示する 最終的なケース効果コード日付の表示形式を設定する <div id="アプリ"> <div>{{日付 }}</div> <div>{{日付 | 形式('yyyy-MM-dd')}}</div> <div>{{日付 | 形式('yyyy-MM-dd hh:mm:ss')}}</div> <div>{{日付 | 形式('yyyy-MM-dd hh:mm:ss:S')}}</div> </div> <script type="text/javascript" src="../js/vue.js"></script> <script type="text/javascript"> // Vue.filter('format', 関数(値, 引数) { // // console.log(arg); // if (arg == 'yyyy-MM-dd') { // var ret = ''; // ret += value.getFullYear() + '-' + (value.getMonth() + 1) + '-' + value.getDate(); // ret を返します。 // } // }) Vue.filter('format', 関数(値, 引数) { 関数 dateFormat(日付, 形式) { if (typeof date === "文字列") { var mts = date.match(/(\/Date\((\d +)\)\/)/); (mts && mts.length >= 3)の場合{ 日付 = parseInt(mts[2]); } } date = 新しい Date(date); if (!date || date.toUTCString() == "無効な日付") { 戻る ""; } varマップ = { "M": date.getMonth() + 1, //月 "d": date.getDate(), //日 "h": date.getHours(), //時間 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //四半期 "S": date.getMilliseconds() //ミリ秒 }; フォーマット = format.replace(/([yMdhmsqS])+/g, 関数(all, t) { var v = map[t]; (v != 未定義)の場合{ (すべて長さ>1)の場合{ v = '0' + v; v = v.substr(v.length - 2); } v を返します。 } そうでなければ (t === 'y') { 戻り値: (date.getFullYear() + '').substr(4 - all.length); } すべてを返します。 }); 戻り形式; } dateFormat(値、引数)を返します。 }) var vm = 新しい Vue({ el: "#app", データ: { 日付: 新しい Date(), }, }); </スクリプト> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Linux (Ubuntu) での MySQL 5.7.17 のインストールと設定のチュートリアル
目次1. 順番に紹介する2. ユーザーを作成する3. ユーザーアカウントを削除する4. アクセス権5...
目次1. 学習目標1.1. Tomcatアーキテクチャの設計と原則をマスターして社内スキルを向上させ...
auto.js を使用して毎日のチェックインを自動化する感染症のせいで、毎日時間通りに家に帰らなけれ...
inode番号でファイルを削除するまずls -iを使用して、削除するファイルのinode番号を見つけ...
1. 分散ストレージシステムの概要情報技術の継続的な発展により、利便性がもたらされる一方で、データ量...
作成したイメージを一元管理し、サービスの展開を容易にするために、プライベート Docker リポジト...
1. スタイルオブジェクトスタイル オブジェクトは単一のスタイル宣言を表し、スタイルが適用されている...
HTML メールはこのサイト上の独立したホスト ページではないため、他の誰かによってホストされていま...
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...
目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...
nginx をインストールApple Mac ではインストールに brew を使用します。brew ...
Dockerコンテナを使用する場合は、nsenterツールを使用する方が便利です。システムにない場合...
まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...
1. TypeScriptの紹介前回の記事ではTypeScriptのインストール、使い方、自動コンパ...
原因と結果1. ansibleコマンドを使用してジャンプサーバー上のマシンBをテストすると、次のエラ...