ホームページ > 記事 > ウェブフロントエンド > 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 = /[`~!@#$%^&*()_+<>?:"{},\/;']/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 のフィルター属性の詳細な説明
以上がVue フィルターとその使用法の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。