この記事では、フィルターを使用して日付をフォーマットする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 のインストールと設定のチュートリアル
現在、CentOS の最新バージョンは CentOS 8 です。次に、CentOS Linux 8....
目次1. プロジェクト開発において、コンポーネント間の最も一般的な関係は次の 2 つのタイプに分けら...
最近Tencent Cloudサーバーを購入し、環境を構築しました。このメモは、これまで MySQL...
mysqlrootパスワードの設定と変更初めて MySQL データベースに入ります。 !環境変数にm...
序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...
目次1. クロージャとは何ですか? 2. 閉鎖の役割序文: JavaScript部分ではクロージャが...
目次1. ElementUIで基本的なスタイルを構築する2. [送信]ボタンをクリックして、アカウン...
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...
jQueryプラグインは、参考のためにダッシュボードを実装します。具体的な内容は次のとおりです。一般...
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
1. 脆弱性の説明マイクロソフトは2019年5月15日、CVE番号CVE-2019-0708のWin...
問題の説明今日、ページ スタイルを変更していたときに、子要素にmargin-top設定したのに、子要...
そこで、この問題を解決するために埋め込みフレームワークを導入します。具体的な原則は、フォームがデータ...
この記事では、参考までにシンプルなHTMLショッピング数量アプレットを紹介します。具体的な内容は次の...