Vue でのフィルターの使用について

この記事では、主に Vue フィルターのサンプル コードと vue フィルターの基本的な使用方法を紹介します。必要な友達は参考にしてください。

1. サンプル コード

は、vue 単一ファイル コンポーネントを採用し、moment プラグイン形式を使用します。日付

2. 効果

フィルターにはこの参照がありませんので、使用しないでください。フィルターを使用して、コンポーネント インスタンスの変数またはメソッドを参照してみてください。

ps: Vue フィルターの基本的な使用法を見てみましょう

<template>
 <p>
  <h1>{{date | dateFormat}}</h1> 
 </p>
</template>
<script>
 import moment from &#39;moment&#39;;
 import &#39;moment/locale/zh-cn&#39;;
 moment.locale(&#39;zh-cn&#39;);
 export default {
  data() {
   return {
    date: new Date()
   }
  },
  filters: {
   dateFormat(val) {
    return moment(val).calendar();
   }
  }
 }
</script>

または

// 注册
Vue.filter('my-filter', function (value) {
 // 返回处理后的值
})
// getter，返回已注册的过滤器
var myFilter = Vue.filter('my-filter')

//在mustache中使用
{{ msg | uppercase }}

上記は私がまとめたもので、将来皆さんのお役に立てれば幸いです。

関連記事: jQuery+CSSを使ったテーブルの実装方法

Vueを使ったコメントフレームワークの実装方法

v4の履歴にアクセスできない理由について

response.body ().string( ) は複数回呼び出すことはできませんか?

Vue コンポーネントを使用してカレンダーを実装する方法 (詳細なチュートリアル)

Webpack を使用して Vue スキャフォールディングを構築する

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