この記事では、フィルターを使用して日付をフォーマットする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 のインストールと設定のチュートリアル
イギリスBFC: ブロック書式設定コンテキストBFCレイアウトルール内箱は縦方向に次々に配置されます...
Ubuntuでsshを開くのに1時間以上かかりました。主な原因は、最初に読んだチュートリアルの手順...
今日、私はクラスメートが問題を解決するのを手伝いました - Tomcat の起動が非常に遅く、約 5...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
MySQLは私がとても気に入っているデータベースです。今日はWindows 8システムでインストール...
データベースのクエリ `学生`から*を選択 クエリ結果id名前誕生日1張三1970-10-01 2李...
sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...
*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
1. 準備1.1 service.bat を含む tomcat 圧縮パッケージをダウンロードします。...
https://docs.microsoft.com/ja-jp/windows/wsl/wsl-...
WeChatアプレットのログインインターフェースは参考までに実装されています。具体的な内容は次のとお...
この記事の例では、参考のためにvueアップロード画像コンポーネントの具体的なコードを共有しています。...
目次問題1: 破壊1. 破壊する方法2. いつ破壊するか2.1 解決策1: route.queryを...
最近、WeChatはAppleによってダークモードの開発を強制されました。ますます多くのウェブサイト...