Vue filter介紹及其使用詳解

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:27:12

Vue filter介紹及其使用詳解

Vue filter介紹及其使用詳解:VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理，返回需要的結(jié)果 Vue 過濾器的基本用法 // 注冊 Vue.filter('my-filter', function (value) { // 返回處理后的值 }) // getter，返回已注冊的過濾器 var myFilter = V

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀Vue filter介紹及其使用詳解:VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理，返回需要的結(jié)果 Vue 過濾器的基本用法 // 注冊 Vue.filter('my-filter', function (value) { // 返回處理后的值 }) // getter，返回已注冊的過濾器 var myFilter = V

VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理，返回需要的結(jié)果

Vue 過濾器的基本用法

// 注冊
Vue.filter('my-filter', function (value) {
 // 返回處理后的值
})
// getter，返回已注冊的過濾器
var myFilter = Vue.filter('my-filter')

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

或

//在標(biāo)簽中使用
<input type="password" v-model="psw | validate">

默認(rèn)的過濾器

注意：在Vue 2.0版本中已經(jīng)廢棄使用默認(rèn)過濾器

名稱	功能
capitalize	首字母大寫
uppercase	全部大寫
lowercase	全部小寫
currency	輸出金錢以及小數(shù)點(diǎn)
pluralize	輸出復(fù)數(shù)的形式
debounce	延期執(zhí)行函數(shù)
limitBy	在 v-for 中使用，限制數(shù)量
filterBy	在 v-for 中使用，選擇數(shù)據(jù)
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 {
 //原內(nèi)容返回
 return val;
 }
 });

在表單中使用

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

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

Vue filter介紹及其使用詳解

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：使用 VUE 用法

熱門焦點(diǎn)

Vue filter介紹及其使用詳解

Vue filter介紹及其使用詳解

Vue filter介紹及其使用詳解

最新推薦

猜你喜歡

熱門推薦