Vue フィルターの使用方法の詳細な説明

今回は、Vueフィルターフィルターの使用方法について詳しく説明します。Vueフィルターを使用する際の注意事項は何ですか?実際の事例を見てみましょう。

サンプルコード

vue 単一ファイル コンポーネントを使用し、moment プラグインを使用して日付をフォーマットします

<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>

手順

フィルターには this 参照 がありません。フィルター内の this は未定義であるため、フィルター内のコンポーネント インスタンスの 変数 メソッドを参照するために this を使用しないでください。

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

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

または

//在标签中使用
<input type="password" v-model="psw | validate">

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Angular でコレクション データをトラバースして表示する方法

vue.js mint-ui カルーセル コンポーネントの使用方法

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