Vue filter介紹及其使用詳解
更新時間：2017年10月21日 11:38:06 作者：craftmanship
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強(qiáng)大的過濾器API，能夠?qū)?shù)據(jù)進(jìn)行各種過濾處理。一起跟隨小編過來看看吧
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ù)點 |
| 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">
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue3結(jié)合ts項目中使用mockjs示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
這篇文章主要介紹了vue + elementUI 表單嵌套驗證,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue的列表之渲染,排序,過濾，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
vue通過watch對input做字?jǐn)?shù)限定的方法
本篇文章主要介紹了vue通過watch對input做字?jǐn)?shù)限定的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了分享Vue組件傳值的幾種常用方式，文章圍繞主題斬開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
這篇文章主要給大家介紹了關(guān)于vue3.0關(guān)閉eslint校驗的3種方法,在實際開發(fā)過程中,eslint的作用不可估量,文中將關(guān)閉的方法介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
vue vuex vue-rouert后臺項目——權(quán)限路由（適合初學(xué)）
這篇文章主要介紹了vue vuex vue-rouert后臺項目——權(quán)限路由，通過本文可以很清除的捋清楚vue+vuex+vue-router的關(guān)系，本版本非常簡單，適合初學(xué)者,需要的朋友可以參考下2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue3中ref動態(tài)綁定的相關(guān)技巧,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以了解一下2024-01-01
vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口
這篇文章主要介紹了vue-element-admin如何從mock數(shù)據(jù)過渡到使用后臺接口問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
下面小編就為大家分享一篇基于vue 動態(tài)加載圖片src的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02