過濾器
1、過濾器的用法,用 ‘|’ 分割表達式和過濾器。
例如：{{ msg | filter}} {{msg | filter(a)}} a就標識filter的一個參數。
用兩個過濾器：{{msg | myfilter | myfilternumber }}
2、自定義的過濾器
過濾器的結構為：Vue.filter("id",function(value,a){});
value是過濾器的一個參數，也是默認的原始值。a是自定義的一個參數。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<!--輸出的字符串中a的個數-->
<span>msg的值：{{msg}},其中a的個數：</span> {{msg | myfilter('a')}}
<br>
<!--輸出的字符串中b的個數-->
<span>msg的值：{{msg}},其中b的個數：</span> {{msg | myfilter | myfilternumber}}
</div>
</body>
<script type="text/javascript">
Vue.filter("myfilter", function(value, arg) {
//返回一個對象或者json字符串，列出字符串中的字符以及字符的個數,不區分大小寫
var obj = {};
var s = value.split('').sort().join("");
var reg = /(.)\1+/ig;
var str = s.replace(reg, "$1"); //字符串去重后的結果
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>
filters過濾器
<div id='app'>
數字1：{{num1:toInt}}
數字2：{{num2:toInt}}
數字3：{{num3:toInt}}
</div>
通過管道符|把函數toInt放在變量后面，num1，num2，num3會分別作為參數value傳入toInt（value）方法進行運算，並返回一個整數。
let vm=new Vue({
el:'#app',
data:{
num1:33.11,
num2:23.22,
num3:90.65
},
//過濾器
filters:{
toInt(value){//ES6語法
return pparseInt(value)
}
}
})
參數對象除了el和data屬性之外，還多了一個filters屬性，它的值就是一個對象，里面定義了一個叫toInt()的方法，傳入了一個value的參數，函數的作用就是把傳入的參數value，簡單地轉成一個整出並return回去。