この記事では、フィルターを使用して日付をフォーマットする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 のインストールと設定のチュートリアル
この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...
目次1. データベースを操作する1.1 データベースを作成する1.2 データベースをクエリする1.3...
上記の Web ページをデザインします。 <!DOCTYPE html> <htm...
1. Docker環境を構築する1. Dockerfileを作成する Centos:latest か...
MySQL 5.7.13 Mac用インストールチュートリアル、非常に詳細で、以下のように記録されてい...
目次1. COUNTの初見2. COUNT(フィールド)、COUNT(定数)、COUNT(*)の違い...
MySQL はネストされたトランザクションをサポートしていますが、それを実行する人は多くありません....
目次1. 仲介業者モデル2. 例1. 見積コンポーネントに購入ボタンを追加する2. 親コンポーネント...
今日、問題が発生しました。ブラウザのアドレスバーにURLアドレスを入力する際、ページを正常にアクセス...
目次sakilaをインストールするインデックススキャンソートテーブル構造インデックススキャンをソート...
1. ユーザーを追加します。まず、adduser コマンドを使用して共通ユーザーを追加します。コマン...
目次1.1Tinyint型の説明1.2 練習環境の説明1.3 未署名属性の追加1.3.1 SQLモー...
コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...
目次1. イメージをプルする2. イメージを実行する3. コンテナ内でアプリケーションをテストする4...
目次整合性制約整合性制約の定義整合性制約の分類主キー制約単一の主キーと複合主キーの違い主キーフィール...