Vueフィルターの使い方を詳しく解説

この記事では、Vue フィルターの紹介とその詳細な使用方法を主に紹介します。VueJs は、データに対してさまざまなフィルター処理を実行できる強力なフィルター API を提供します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

VueJs は、データに対してさまざまなフィルター処理を実行し、必要な結果を返すことができる強力なフィルター API を提供します

Vue フィルターの基本的な使用法

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

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

または

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

デフォルトフィルター

注: デフォルトのフィルターの使用は Vue 2.0 バージョンでは非推奨になりました

Name	Function
capitalize	Capitalize
upper大文字	すべて大文字
小文字	すべて小文字
currency	金額と小数点を出力
pluralize	複数形を出力
debounce	遅延実行関数
limitBy	v-for、limit で使用されますv-for で使用される量
filterBy	、データの選択
v-for で使用される orderBy	、並べ替え

カスタムフィルター

フィルターのグローバル定義を使用

 //过滤非法字符
 Vue.filter('validate', function(val) {
  val = val.toString();
  reg = /[`~!@#$%^&*()_+<>?:"{},\/;&#39;]/im;

  if(reg.test(val)) {
   $.alert("请勿输入非法字符", "温馨提示");
   //返回时删除非法字符
   return val.substr(0, val.length - 1);
  } else {
   //原内容返回
   return val;
  }
 });

フォームで使用してください

<input type="password" placeholder="输入密码" v-model="psw | validate" maxlength = "18">

学習しましたか？役に立つと思ったら集めてください。

関連おすすめ:

Ajaxリクエストとフィルター連携事例の詳細説明

CSS3のfilter属性の詳細説明

JavaScriptのフィルター関数の詳細な紹介

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