Vueのフィルタの説明
2022-01-13 17:09:17
<body>
<div id="root">
<h2> Show time after formatting</h2>
<! -- Calculated property implementation -->
<h2> now {{fmtTime}}</h2>
<! -- methods implementation -->
<h2> is now {{getFmtTime()}}</h2>
<! -- Filter time implementation -- >
<h2> now it's {{time | timeFormater}}</h2>
</div>
<div id="root2">
<h2> Now it's: {{msg |mySlice }}</h2>
</div>
<script>
Vue.config.productionTip = false;
//global filter
Vue.filter('mySlice', function(value) {
return value.slice(0, 4)
})
new Vue({
el: "#root",
data: {
time: 1637047951556 // timestamp
},
computed: {
fmtTime() {
return dayjs(this.time).format('YYYY year MM month DD HH:mm:ss')
}
},
methods: {
getFmtTime() {
return dayjs(this.time).format('YYYY year MM month DD HH:mm:ss')
}
},
filters: {
timeFormater(value) {
return dayjs(value).format('YYYY year MM month DD HH: mm: ss ')
}
},
})
new Vue({
el: "#root2",
data: {
msg: 'hello world'
}
})
</script>
</body>
画像
概要
この記事はこれで終わりです。この記事があなたの助けになることを願っていますし、BinaryDevelopの他のコンテンツにももっと注目していただければと思います
関連
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
要素ツリー制御によるvueTreeテーブル
-
vue3.0プロジェクトのアーキテクチャを構築するための便利なツール
-
元のイベントが実行されなかった後に要素を追加するためのjQueryソリューション
-
vue for 登録ページ効果 vue for sms 認証コードログイン
-
vueのグローバルがscss(mixin)を導入。
-
vueの補間表現とv-textディレクティブの違いについて
-
VUEグローバルフィルターの概念と留意点、基本的な使い方
-
Vueのフォームイベントのデータバインディングの説明
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン