ホームページ  >  記事  >  ウェブフロントエンド  >  Vue フィルターとその使用法の概要

Vue フィルターとその使用法の概要

小云云
小云云オリジナル
2018-05-30 14:37:342157ブラウズ

この記事では、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(&#39;validate&#39;, 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。