vue filter過濾器簡單介紹一下鹦肿，就是把一個(gè)數(shù)經(jīng)過過濾器之后變換出來的另一種方式呈現(xiàn)药磺，比如時(shí)間的格式化趴泌，或者添加一些裝飾之類的等。
過濾器分為兩種：一種全局過濾器圾旨；另一種是局部過濾器
1踱讨，全局過濾器
1，在 mian.js 中定義全局過濾器
Vue.filter('allFilter',function(val){
return val + '我是全局過濾器'
})
2砍的，在其他的頁面中調(diào)用
<div>{{ value | allFilter }}</div>
image.png
注：如果過濾器定義的比較多時(shí)痹筛，我們可以單獨(dú)建立一個(gè)文件，之后把這個(gè)文件引入到 main.js 中的即可
2廓鞠，局部過濾器
1帚稠，在定義局部過濾器頁面中定義
export default {
props: ["dir"],
data() {
return { };
},
filters: {
allFilter(val) {
return val + "我是局部過濾器";
}
}
};
2，在其他的頁面中調(diào)用
<div>{{ value | allFilter }}</div>
image.png
3床佳，過濾器傳參
注：如果是文字之類的滋早，也可以用過濾器替換其中的一些詞
案例是全局過濾器，局部過濾器同理
Vue.filter('msgformat',function( msg, value ){
//字符串 replace 方法砌们，第一個(gè)參數(shù)杆麸，除了寫一個(gè) 字符串之外，還可以定義一個(gè)正則浪感，g修飾符表示全局匹配
return msg.replace(/單純/g, value )
})
頁面中調(diào)用
<p>{{ msg | msgformat('美麗') }}</p>
export default {
props: ["dir"],
data() {
return {// 把 msg 里面的 單純 變?yōu)?美麗
msg:'我是一個(gè)單純的少女昔头，單純的我，傻傻地問影兽，世界上誰才是最單純的人'
};
},
}
展示：
image.png
注：過濾器可以傳遞多個(gè)參數(shù)
Vue.filter('msgformat',function( msg, value1揭斧，value2 ){
//字符串 replace 方法，第一個(gè)參數(shù)峻堰，除了寫一個(gè) 字符串之外讹开，還可以定義一個(gè)正則，g修飾符表示全局匹配
return msg.replace(/單純/g, value1+value2 )
})
<p>{{ msg | msgformat('美麗'捐名，'123') }}</p>
展示：
image.png
過濾器還可以進(jìn)行疊加使用
// 在main.js 定義兩個(gè)全局過濾器
Vue.filter('allFilter',function(msg,value1,value2){
return msg.replace(/單純/g, value1+value2 )
})
Vue.filter('allFilter2',function(msg,value1){
return value1+ '!!!'
})
// 頁面中調(diào)用
<div>{{ msg | allFilter('美麗','123') | allFilter2(msg)}}</div>
同理旦万，局部過濾器也是同樣的方法
以上就是過濾器的用法
補(bǔ)充：時(shí)間格式化
Vue.filter('dateformat', function (datestr, pattern = '') {
//根據(jù)給的時(shí)間符串，得到特定的時(shí)間
var dt = new Date(datestr)
// yyyy-mm-dd
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
//return y + '-'+ m + '-' + 'd'
//return 'yyyy+mm+dd'
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-$kosaxw9` //這個(gè)的引號(hào)是 反引號(hào)镶蹋，在鍵盤1的左邊
} else {
var hh = dt.getHours()
var mm = dt.getMinutes()
var ss = dt.getSeconds()
return `$(y)-$(m)-$(d) $(hh):$(mm):$(ss)`
}
})
我寫了一個(gè)簡單的 vue 這方面的 dome纸型，鏈接：https://github.com/zhongmin2011/vue-dome
