Vueでフィルターを使う方法-jsチュートリアル-php.cn

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

亚连

リリース： 2018-06-12 14:31:26

オリジナル

3683 人が閲覧しました

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

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

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

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

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

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

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

Vue.filter(&#39;dateconversion&#39;, 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 サイトの他の関連記事を参照してください。