過濾器:
vue提供過濾器:
capitalize uppercase currency....
|
1
2
3
|
<
div
id
=
"box"
>
{{msg|currency ￥}}
</
div
>
|
debounce 配合事件，延遲執行
|
1
2
3
|
<
div
id
=
"box"
>
<
input
type
=
"text"
@
keyup
=
"show | debounce 2000"
>
</
div
>
|
數據配合使用過濾器:
limitBy 限制幾個
limitBy 參數(取幾個)
limitBy 取幾個 從哪開始
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<div id=
"box"
>
<ul>
<!--取2個-->
<li v-
for
=
"val in arr | limitBy 2"
>
{{val}}
</li>
<br/>
<br/>
<!--取2個，從第arr.length-2個開始取-->
<li v-
for
=
"val in arr | limitBy 2 arr.length-2"
>
{{val}}
</li>
</ul>
</div>
<script>
var
vm=
new
Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{
}
}).$mount(
'#box'
);
</script>
|
vue插件filterBy 過濾數據
filterBy '誰'
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div id=
"box"
>
<input type=
"text"
v-model=
"a"
>
<ul>
<li v-
for
=
"val in arr | filterBy a"
>
{{val}}
</li>
</ul>
</div>
<script>
var
vm=
new
Vue({
data:{
arr:[
'width'
,
'height'
,
'background'
,
'orange'
],
a:
''
},
methods:{
}
}).$mount(
'#box'
);
</script>
|
angular orderBy 排序
orderBy 誰 1/-1
1 -> 正序
2 -> 倒序
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<div id=
"box"
>
<input type=
"text"
v-model=
"a"
>
<ul>
<li v-
for
=
"val in arr | orderBy -1"
>
{{val}}
</li>
</ul>
</div>
<script>
var
vm=
new
Vue({
data:{
arr:[
'width'
,
'height'
,
'background'
,
'orange'
],
a:
''
},
methods:{
}
}).$mount(
'#box'
);
</script>
|
自定義過濾器: model ->過濾 -> view
|
1
2
|
Vue.filter(name,
function
(input){
});
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id=
"box"
>
{{a | toDou 1 2}}
</div>
<script>
Vue.filter(
'toDou'
,
function
(input,a,b){
alert(a+
','
+b);
return
input<10?
'0'
+input:
''
+input;
});
var
vm=
new
Vue({
data:{
a:9
},
methods:{
}
}).$mount(
'#box'
);
</script>
|
時間轉化器
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<div id=
"box"
>
{{a | date}}
</div>
<script>
Vue.filter(
'date'
,
function
(input){
var
oDate=
new
Date(input);
return
oDate.getFullYear()+
'-'
+(oDate.getMonth()+1)+
'-'
+oDate.getDate()+
' '
+oDate.getHours()+
':'
+oDate.getMinutes()+
':'
+oDate.getSeconds();
});
var
vm=
new
Vue({
data:{
a:Date.now()
//返回1970 年 1 月 1日午夜與當前日期和時間之間的毫秒數。
},
methods:{
}
}).$mount(
'#box'
);
</script>
|
50、選擇器過濾html標記
雙向過濾器:*
|
1
2
3
4
5
6
7
8
|
Vue.filter(
'filterHtml'
,{
read:
function
(input){
//model-view
return
input.replace(/<[^<+]>/g,
''
);
},
write:
function
(val){
//view -> model
return
val;
}
});
|
數據 -> 視圖
model -> view
view -> 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
|
<!DOCTYPE html>
<html lang=
"en"
>
<head>
<meta charset=
"UTF-8"
>
<title></title>
<style>
</style>
<script src=
"vue.js"
></script>
<script>
//<h2>welcome</h2>
Vue.filter(
'filterHtml'
,{
read:
function
(input){
//model-view
alert(1);
return
input.replace(/<[^<]+>/g,
''
);
},
write:
function
(val){
//view -> model
console.log(val);
return
val;
}
});
window.onload=
function
(){
var
vm=
new
Vue({
data:{
msg:
'<strong>welcome</strong>'
}
}).$mount(
'#box'
);
};
</script>
</head>
<body>
<div id=
"box"
>
<input type=
"text"
v-model=
"msg | filterHtml"
>
<br>
{{msg | filterHtml}}
</div>
</body>
</html>
|