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

Vue過濾器

{{msg |msgFormat}}

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

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

})

var vm = new Vue({

el:'#app',

data:{

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

}

})

使用Vue.filter()來對指定的元素進(jìn)行過濾，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è)愛學(xué)習(xí)的人，學(xué)習(xí)各種技術(shù)"

}

})

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

{{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è)愛學(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}-$ozvdkddzhkzd`

} else {

var hh = dt.getHours()

var mm = dt.getMinutes()

var ss = dt.getSeconds()

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

}

})

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

var vm2 = new Vue({

el: '#app2',

data: {

dt: new Date()

},

methods: {},

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

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

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}-$ozvdkddzhkzd`

} 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}-$ozvdkddzhkzd ${hh}:${mm}:${ss} ~~~~~~~`

}

}

},

相關(guān)推薦：

總結(jié)

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

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