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
uppercase	ALL CAPS
小文字	すべて小文字
currency	お金と小数点を出力
pluralize	複数形を出力
debounce	遅延実行関数
limitBy	で使用数を制限する
filterBy	v-for で使用、データを選択
orderBy	v-for で使用、並べ替え

 //过滤非法字符
 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">

関連推奨事項:

CSS3 のフィルター属性の詳細な説明

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

JavaWeb サーブレット分析のフィルター フィルターの例

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