Vue filter介紹及其使用詳解
更新時間：2017年10月21日 11:38:06 作者：craftmanship
本篇文章主要介紹了Vue filter介紹及其使用詳解，VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理。一起跟隨小編過來看看吧
VueJs 提供了強大的過濾器API，能夠?qū)?shù)據(jù)進行各種過濾處理，返回需要的結(jié)果
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版本中已經(jīng)廢棄使用默認過濾器
| 名稱 | 功能 |
|---|---|
| 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
如何使用vue slot創(chuàng)建一個模態(tài)框的實例代碼
這篇文章主要介紹了如何使用vue slot創(chuàng)建一個模態(tài)框,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
在本篇文章里小編給大家分享了關(guān)于vue安裝遇到的5個報錯小結(jié)以及解決方法，需要的朋友們參考下。2019-06-06
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了詳解vue/cli 3使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
我們通過實例代碼給大家分享了Vue中watch的高級用法，對此知識點有需要的朋友可以跟著學習下。2018-05-05
elementui時間/日期選擇器選擇禁用當前之前(之后)時間代碼實例
當我們在進行網(wǎng)頁開發(fā)時,通常需要用到一些日期組件來方便用戶選擇時間,其中element日期組件是一個非常好用的工具,這篇文章主要給大家介紹了關(guān)于elementui時間/日期選擇器選擇禁用當前之前(之后)時間的相關(guān)資料,需要的朋友可以參考下2024-02-02
使用vue-json-viewer實現(xiàn)JSON數(shù)據(jù)可視化詳解
vue-json-viewer?是一個用于在?vue.js?應(yīng)用中展示?JSON?數(shù)據(jù)的插件,它提供了一種直觀和美觀的方式來可視化?JSON?數(shù)據(jù),下面我們來看看如何使用它進行JSON數(shù)據(jù)可視化吧2025-01-01
Vue 應(yīng)用在首屏加載時速度過慢,通常與以下問題有關(guān)：打包文件過大、網(wǎng)絡(luò)請求過多、資源加載過慢,針對這些問題,本文給大家介紹了Vue首屏加載過慢的優(yōu)化方法,需要的朋友可以參考下2025-01-01
vue中this.$http.post()跨域和請求參數(shù)丟失的解決
這篇文章主要介紹了vue中this.$http.post()跨域和請求參數(shù)丟失的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本文主要介紹了Vue中實現(xiàn)滾動加載與無限滾動，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06