Vue.js?的過濾器你了解多少
更新時(shí)間：2022年02月05日 10:30:54 作者：澤哥ins
這篇文章主要為大家詳細(xì)介紹了Vue.js?的過濾器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
一、過濾器作用
過濾器用于進(jìn)行文本內(nèi)容格式化處理。
二、過濾器的使用方式
過濾器可以在插值表達(dá)式和 v-bind 中使用。
三、過濾器的分類
- 全局過濾器
- 局部過濾器
四、全局過濾器
全局過濾器可以在任意Vue實(shí)例中使用。
語法書寫方式如下：
Vue.filter('過濾器名稱'，function(value) {
//邏輯代碼
return '處理結(jié)果';
})注意：示例中的 | 豎線表示管道符。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15.全局過濾器</title>
</head>
<body>
<div id="app">
<p v-bind:title="value | filterA">這是標(biāo)簽</p>
<p>{{ value | filterA }}</p>
</div>
<div id="app2">
<p v-bind:title="value | filterA">這是標(biāo)簽</p>
<p>{{ value | filter}}</p>
</div>
<script src="../01.vue.js入門/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA',function (value) {
return value.split('-').join('');
})
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
new Vue({
el: '#app2',
data: {
value: 'a-b-c'
}
})
</script>
</body>
</html>• 全局過濾器可以將一個(gè)數(shù)據(jù)傳入到多個(gè)過濾器中進(jìn)行處理。
<body>
<div id="app">
<p>{{ value | filterA | filterB }}</p>
</div>
<script src="../01.vue.js入門/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA',function (value){
console.log(value + ' filterA');
return value.split('-').join('');
})
Vue.filter('filterB',function (value) {
console.log(value + ' filterB');
return value[0].toUpperCase() + value.slice(1);
})
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
</script>
</body>• 一個(gè)過濾器可以傳入多個(gè)參數(shù)。
<body>
<div id="app">
<!-- 注意：參數(shù)1永遠(yuǎn)是管道符左邊的value -->
<p>{{ value | filterC('TGW—',200)}}</p>
</div>
<script src="../01.vue.js入門/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterC', function(par1,par2,par3) {
console.log(par1,par2,par3);
return par2 + par1.split('-').join('');
});
new Vue({
el: '#app',
data: {
value: 'a-b-c'
}
})
</script>
</body>五、局部過濾器
• 局部過濾器只能在當(dāng)前 Vue 實(shí)例中使用。其他的Vue實(shí)例中無法訪問。
<div id="app">
<p>{{ content | filterA }}</p>
<p>{{ content2 | filterA }}</p>
<p>{{ content | filterA | filterB }}</p>
<p>{{ content | filterA | filterC('TGW—')}}</p>
</div>
<!-- <div id="app2">
<p>{{ content | filterA }}</p>
</div> -->
<script src="../01.vue.js入門/js/vue-2.6.14.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: 'a-b-c',
content2: 'd-e-f'
},
filters: {
filterA: function (value){
console.log(value);
return value.split('-').join('')
},
filterB: function (value) {
return value.split('').reverse().join('')
},
filterC (value,prefix) {
return prefix + value;
}
}
})
// new Vue({
// el: '#app2',
// data: {
// content: 'g-h-i'
// }
// })
</script>
</body>六、全局過濾器和局部過濾器重名現(xiàn)象
當(dāng)我們出現(xiàn)全局過濾器和局部過濾器名字一樣時(shí)，那么我們?cè)賵?zhí)行的時(shí)候，是按照就近原則進(jìn)行執(zhí)行的，所以執(zhí)行的是局部過濾器的代碼塊。
<body>
<div id="app">
<p>{{ content | filterA }}</p>
</div>
<script src="../01.vue.js入門/js/vue-2.6.14.js"></script>
<script>
Vue.filter('filterA', function (value){
return value.split('').reverse().join('')
})
new Vue({
el: '#app',
data: {
content: 'a-b-c'
},
filters: {
filterA (value) {
return value.split('-').join('')
}
}
})
</script>
</body>總結(jié)
本篇文章就到這里了，希望能給您帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！
相關(guān)文章
這篇文章主要介紹了VueJs打包之后遇到的坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問題及解決
這篇文章主要介紹了Vue項(xiàng)目中props傳值時(shí)子組件檢測(cè)不到的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02
這篇文章主要介紹了vue修改數(shù)據(jù)頁面無效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
vue如何通過button的disabled控制按鈕能否被使用
這篇文章主要介紹了vue如何通過button的disabled控制按鈕能否被使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue實(shí)現(xiàn)簡(jiǎn)單購物車小案例
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單購物車小案例，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue3實(shí)現(xiàn)頁面跳轉(zhuǎn)的示例代碼
這篇文章給大家介紹了vue3如何實(shí)現(xiàn)頁面跳轉(zhuǎn),文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了Vuex actions?異步操作方法,需要的朋友可以參考下2023-10-10
這篇文章主要給大家介紹了關(guān)于Vue開發(fā)中常見的套路和技巧的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要介紹了Vue父子模版?zhèn)髦导敖M件傳值的三種方法,需要的朋友可以參考下2017-11-11