本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于Vue中vue.filter()的使用方法介紹(過(guò)濾)，有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

Vue過(guò)濾器

{{msg |msgFormat}}

Vue.filter('msgFormat',function(msg){

return msg.replace(/學(xué)習(xí)/g,'討論');

})

var vm = new Vue({

el:'#app',

data:{

msg:"我是一個(gè)愛(ài)學(xué)習(xí)的人，學(xué)習(xí)各種技術(shù)"

}

})

使用Vue.filter()來(lái)對(duì)指定的元素進(jìn)行過(guò)濾，function中傳遞的參數(shù)即是el表達(dá)式中的第一個(gè)值，

同時(shí)還可以傳遞多個(gè)參數(shù)

{{msg |msgFormat('討論')}}

Vue.filter('msgFormat',function(msg,arg){

return msg.replace(/學(xué)習(xí)/g,arg);

})

var vm = new Vue({

el:'#app',

data:{

msg:"我是一個(gè)愛(ài)學(xué)習(xí)的人，學(xué)習(xí)各種技術(shù)"

}

})

同時(shí)可以進(jìn)行多次過(guò)濾

{{msg |msgFormat('討論')|test}}

Vue.filter('msgFormat',function(msg,arg){

return msg.replace(/學(xué)習(xí)/g,arg);

})

Vue.filter('test',function(msg){

return msg+'=====';

})

var vm = new Vue({

el:'#app',

data:{

msg:"我是一個(gè)愛(ài)學(xué)習(xí)的人，學(xué)習(xí)各種技術(shù)"

}

})

實(shí)際中經(jīng)常會(huì)使用到的實(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

if (pattern.toLowerCase() === 'yyyy-mm-dd') {

return `${y}-${m}-$ze8trgl8bvbq`

} else {

var hh = dt.getHours()

var mm = dt.getMinutes()

var ss = dt.getSeconds()

return `${y}-${m}-$ze8trgl8bvbq ${hh}:${mm}:${ss}`

}

})

同時(shí)如果頁(yè)面中存在兩個(gè)Vue對(duì)象，針對(duì)每個(gè)對(duì)象可以定義私有過(guò)濾器，如下// 如何自定義一個(gè)私有的過(guò)濾器(局部)

var vm2 = new Vue({

el: '#app2',

data: {

dt: new Date()

},

methods: {},

filters: { // 定義私有過(guò)濾器 過(guò)濾器有兩個(gè) 條件 【過(guò)濾器名稱(chēng) 和 處理函數(shù)】

// 過(guò)濾器調(diào)用的時(shí)候，采用的是就近原則，如果私有過(guò)濾器和全局過(guò)濾器名稱(chēng)一致了，這時(shí)候 優(yōu)先調(diào)用私有過(guò)濾器

dateFormat: function (dateStr, pattern = '') {

// 根據(jù)給定的時(shí)間字符串，得到特定的時(shí)間

var dt = new Date(dateStr)

// yyyy-mm-dd

var y = dt.getFullYear()

var m = (dt.getMonth() + 1).toString().padStart(2, '0')

var d = dt.getDate().toString().padStart(2, '0')

if (pattern.toLowerCase() === 'yyyy-mm-dd') {

return `${y}-${m}-$ze8trgl8bvbq`

} else {

var hh = dt.getHours().toString().padStart(2, '0')

var mm = dt.getMinutes().toString().padStart(2, '0')

var ss = dt.getSeconds().toString().padStart(2, '0')

return `${y}-${m}-$ze8trgl8bvbq ${hh}:${mm}:${ss} ~~~~~~~`

}

}

},

相關(guān)推薦：

總結(jié)

以上是生活随笔為你收集整理的vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。