この記事では、フィルターを使用して日付をフォーマットする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. 画像を取得する #Webコントロールページを含むバージョンを指定します docker pull...
ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...
この記事では、WeChatミニプログラムの具体的なコードを共有し、左にスワイプしてリスト項目を削除す...
ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...
ワーカープロセスは、起動されると、まず自身の動作に必要な環境を初期化し、次に実行する必要があるイベン...
この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...
viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...
学生.xml <?xml バージョン="1.0" エンコーディング=&qu...
ファイル名が少ないファイルを表示ファイル名を少なく | grep -n コンテンツを検索内容に応じて...
複数のTomcatをインストールする場合は、システムにJDKがインストールされている必要があり、 T...
テーブルを作成する テーブル `map` を作成します ( `id` int(11) NULLではな...
序文まず、高性能サーバーの高可用性またはホットスタンバイソリューションである Keepalived ...
目次ミックスインの実装フック関数のマージプロジェクト実践伸ばす要約するVue は mixins AP...
この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...
MySQL 8.0 サービスを開始できません最近、 cmdで MySQL サービスを起動するときに遭...