1、自定義的過濾器，當然這包括注冊在全局和注冊在實例化的內部
（1）注冊在全局的fliter
(1)全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面
(2) 過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算
(3)可以設置兩個過濾器參數,前提是這兩個過濾器處理的不沖突
(4)用戶從input輸入的數據在回傳到model之前也可以先處理
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>vue自定義過濾器</title>
<script src=
"../js/vue.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<meta name=
"viewport"
content=
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
</head>
<body>
<div class=
"test"
>
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算。-->
<p>{{message | sum | currency }}</p> <!--添加兩個過濾器,注意不要沖突-->
<input type=
"text"
v-model=
"message | change"
> <!--用戶從input輸入的數據在回傳到model之前也可以先處理-->
</div>
<script type=
"text/javascript"
>
// -----------------------------------------華麗分割線(從model->view)---------------------------------------
Vue.filter(
"sum"
,
function
(value) {
//全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面
return
value + 4;
});
Vue.filter(
'cal'
,
function
(value, begin, xing) {
//全局方法 Vue.filter() 注冊一個自定義過濾器,必須放在Vue實例化前面
return
value + begin + xing;
});
// -----------------------------------------華麗分割線(從view->model)---------------------------------------
Vue.filter(
"change"
, {
read:
function
(value) {
// model -> view 在更新 `<input>` 元素之前格式化值
return
value;
},
write:
function
(newVal,oldVal) {
// view -> model 在寫回數據之前格式化值
console.log(
"newVal:"
+newVal);
console.log(
"oldVal:"
+oldVal);
return
newVal;
}
});
var
myVue =
new
Vue({
el:
".test"
,
data: {
message:12
}
});
</script>
</body>
</html>
|
filter是默認會傳入當前的item，而且filter的第一個參數默認就是當前的item。
（2）注冊在實例化內部
上面的例子直接注冊在Vue全局上面,其他不用這個過濾器的實例也會被迫接受,其實過濾器可以注冊在實例內部,僅在使用它的實例里面注冊
上面的程序改寫為:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<meta charset=
"UTF-8"
>
<title>vue自定義過濾器</title>
<script src=
"../js/vue.js"
type=
"text/javascript"
charset=
"utf-8"
></script>
<meta name=
"viewport"
content=
"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
/>
</head>
<body>
<div class=
"test"
>
<p>{{message | sum}}</p>
<p>{{message | cal 10 20}}</p> <!--過濾器函數始終以表達式的值作為第一個參數。帶引號的參數視為字符串，而不帶引號的參數按表達式計算。-->
<p>{{message | sum | currency }}</p> <!--添加兩個過濾器,注意不要沖突-->
<input type=
"text"
v-model=
"message | change"
> <!--用戶從input輸入的數據在回傳到model之前也可以先處理-->
</div>
<script type=
"text/javascript"
>
Vue.filter(
"change"
, {
read:
function
(value) {
// model -> view 在更新 `<input>` 元素之前格式化值
return
value;
},
write:
function
(newVal,oldVal) {
// view -> model 在寫回數據之前格式化值
console.log(
"newVal:"
+newVal);
console.log(
"oldVal:"
+oldVal);
return
newVal;
}
});
var
myVue =
new
Vue({
el:
".test"
,
data: {
message:12
},
filters: {
sum:
function
(value) {
return
value + 4;
},
cal:
function
(value, begin, xing) {
return
value + begin + xing;
}
}
});
</script>
</body>
</html>
|
2、使用js中的迭代函數filter
（1）實例一原文
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
var
app5 =
new
Vue({
el:
'#app5'
,
data: {
shoppingList: [
"Milk"
,
"Donuts"
,
"Cookies"
,
"Chocolate"
,
"Peanut Butter"
,
"Pepto Bismol"
,
"Pepto Bismol (Chocolate flavor)"
,
"Pepto Bismol (Cookie flavor)"
],
key:
""
},
computed: {
filterShoppingList:
function
() {
// `this` points to the vm instance
var
key =
this
.key;
var
shoppingList =
this
.shoppingList;
//在使用filter時需要注意的是，前面調用的是需要使用filter的數組，而給filter函數傳入的是數組中的每個item，也就是說filter里面的函數，是每個item要去做的，並將每個結果返回。
return
shoppingList.filter(
function
(item) {
return
item.toLowerCase().indexOf(key.toLowerCase()) != -1
});;
}
}
})
<ul>
Filter Key<input type=
"text"
v-model=
"key"
>
<li v-
for
=
"item in filterShoppingList"
>
{{ item }}
</li>
</ul>
|
最終效果實現了根據關鍵字來過濾列表的功能。
其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
總結
以上所述是小編給大家介紹的vue 中filter的多種用法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。