过滤器:
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> |