Vueでフィルターを使う方法

亚连
リリース: 2018-06-12 14:31:26
オリジナル
3688 人が閲覧しました

Vue のフィルターは、通常、いくつかの一般的なテキスト書式設定で使用されます。フィルターは、二重中括弧補間と v バインド式の 2 つの場所で使用できます。この記事では、Web フロントエンドの Vue フィルターに関する関連知識を紹介します。興味のある方は一緒にご覧ください。

Vue フィルターは、通常、次の 2 つの場所で使用されます。ブラケット補間と v バインド式。

たとえば、中国の通貨文字「¥」を価格に自動的に追加したり、期間または(タイムスタンプ)間の変換をフィルタリングしたりできます。

JavaScript と jQuery の時代!期間の表示時や送信時に変換する必要があり、少々面倒です(Vueを使ってみて個人的に面倒に感じています)。

これ以上の説明は省略して、次の例を見てみましょう:

filter で定義されるフィルターはローカルまたはグローバルにすることができます。いつものように、グローバル フィルター キーワードを登録することをお勧めします。 ) まず

グローバル 登録されたフィルターは main.js ファイルにありますが、もちろん別の js ファイルに置くこともできます

Vue.filter('dateconversion', function (value) { // 一个时间戳转正常的过滤器
 let date = new Date(value) // nuw 一个时间
 let getHours // 小时
 let getMinutes // 分
 if(date.getHours() < 10){getHours = "0"+date.getHours()}else{ getHours = date.getHours()}
// 判断小时是否小于10的补全:加0
 if(date.getMinutes() < 10){getMinutes = "0"+date.getMinutes()}else{ getMinutes = date.getMinutes()}
// 判断分是否小于10的补全:加0
 return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+ getHours +":"+ getMinutes // 返回转换后的值
})
ログイン後にコピー

変換したい場合は各コンポーネントで使用することができ、非常に便利です。表示時間

<template>
{{date | dateconversion}} // 使用方式,就是怎么简单,整个项目随便用
</template> 
<script>
export default {
 data () {
  return {
   date: &#39;&#39; // 后台传来的时间戳
  }
 }
}
</script>
ログイン後にコピー

を上にまとめましたので、今後皆様のお役に立てれば幸いです。

関連記事:

jsのPromiseに関する知識ポイントを詳しく紹介

jQueryのniceScrollスクロールバーの位置ずれ問題を解決する方法

JSでBaidu検索インターフェースを実装する方法

以上がVueでフィルターを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート