Vue過濾器的用法和自定義過濾器使用
更新時間：2017年02月08日 11:46:20 作者：香農(nóng)·良
本篇文章主要介紹了Vue過濾器的用法和自定義過濾器，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
1、過濾器的用法,用 ‘|' 分割表達(dá)式和過濾器。
例如：{{ msg | filter}} {{msg | filter(a)}} a就標(biāo)識filter的一個參數(shù)。
用兩個過濾器：{{msg | myfilter | myfilternumber }}
2、自定義的過濾器
過濾器的結(jié)構(gòu)為：Vue.filter("id",function(value,a){});
value是過濾器的一個參數(shù)，也是默認(rèn)的原始值。a是自定義的一個參數(shù)。
自定義過濾器的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!--輸出的字符串中a的個數(shù)-->
<span>msg的值：{{msg}},其中a的個數(shù)：</span> {{msg | myfilter('a')}}
<br>
<!--輸出的字符串中b的個數(shù)-->
<span>msg的值：{{msg}},其中b的個數(shù)：</span> {{msg | myfilter | myfilternumber}}
</div>
</body>
<script type="text/javascript">
Vue.filter("myfilter", function(value, arg) {
//返回一個對象或者json字符串，列出字符串中的字符以及字符的個數(shù),不區(qū)分大小寫
var obj = {};
var s = value.split('').sort().join("");
var reg = /(.)\1+/ig;
var str = s.replace(reg, "$1"); //字符串去重后的結(jié)果
var i = 0,
n,
a;
while (s.length > 0) {
a = str.charAt(i);
n = s.lastIndexOf(a) + 1;
obj[a] = n;
s = s.substring(n);
i++;
}
return arg ? obj[arg] : obj;
});
Vue.filter("myfilternumber", function(value) {
return value.b;
});
var app1 = new Vue({
el: "#app",
data: {
msg: "a1a1aba2babac"
},
methods: {
}
});
</script>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中對組件二開解決思路以及方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-04-04
vue.js實現(xiàn)h5機(jī)器人聊天（測試版）
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)h5機(jī)器人聊天測試版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
VUE實現(xiàn)強(qiáng)制渲染,強(qiáng)制更新
今天小編就為大家分享一篇VUE實現(xiàn)強(qiáng)制渲染,強(qiáng)制更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
這篇文章主要介紹了Vue中的scoped實現(xiàn)原理及穿透方法,本文通過實例文字相結(jié)合的形式給大家介紹的非常詳細(xì)，需要的朋友可以參考下2018-05-05
這篇文章主要為大家詳細(xì)介紹了vue使用axios跨域請求數(shù)據(jù)的問題，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
本文主要介紹了vue獲取el-form的整體驗證狀態(tài)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
這篇文章主要介紹了vue3中的組件間的傳值(props)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況
這篇文章主要介紹了vue 解決在微信內(nèi)置瀏覽器中調(diào)用支付寶支付的情況，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點(diǎn)
監(jiān)聽事件是我們在使用vue.js的時候經(jīng)常使用的一個功能，下面這篇文章主要介紹了Vue.js實戰(zhàn)之通過監(jiān)聽滾動事件實現(xiàn)動態(tài)錨點(diǎn) 的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-04-04
本文主要介紹了rollup3.x+vue2打包組件的實現(xiàn)，詳細(xì)的介紹了打包會存在的問題，包版本的問題，babel 轉(zhuǎn)換jsx等問題，具有一定的參考價值，感興趣的可以了解一下2023-03-03