ホームページ > 記事 > ウェブフロントエンド > Vue でのフィルターの使用について
この記事では、主に Vue フィルターのサンプル コードと vue フィルターの基本的な使用方法を紹介します。必要な友達は参考にしてください。
1. サンプル コード
は、vue 単一ファイル コンポーネントを採用し、moment プラグイン形式を使用します。日付
2. 効果
フィルターにはこの参照がありませんので、使用しないでください。フィルターを使用して、コンポーネント インスタンスの変数またはメソッドを参照してみてください。
ps: Vue フィルターの基本的な使用法を見てみましょう <template>
<p>
<h1>{{date | dateFormat}}</h1>
</p>
</template>
<script>
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');
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 サイトの他の関連記事を参照してください。