vue过滤器用法实例分析
过滤器:
vue提供过滤器:
capitalize uppercase currency....
?
1 2 3 | <divid="box">
{{msg|currency ￥}}
</div>
|
debounce 配合事件，延迟执行
?
1 2 3 | <divid="box">
<inputtype="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>
varvm=newVue({
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>
varvm=newVue({
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>
varvm=newVue({
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);
returninput<10?\'0\'+input:\'\'+input;
});
varvm=newVue({
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){
varoDate=newDate(input);
returnoDate.getFullYear()+\'-\'+(oDate.getMonth()+1)+\'-\'+oDate.getDate()+\' \'+oDate.getHours()+\':\'+oDate.getMinutes()+\':\'+oDate.getSeconds();
});
varvm=newVue({
data:{
a:Date.now()
},
methods:{
}
}).$mount(\'#box\');
</script>
|
50、选择器过滤html标记
双向过滤器:*
?
1 2 3 4 5 6 7 8 | Vue.filter(\'filterHtml\',{
read:function(input){
returninput.replace(/<[^<+]>/g,\'\');
},
write:function(val){
returnval;
}
});
|
数据 -> 视图
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>
Vue.filter(\'filterHtml\',{
read:function(input){
alert(1);
returninput.replace(/<[^<]+>/g,\'\');
},
write:function(val){
console.log(val);
returnval;
}
});
window.onload=function(){
varvm=newVue({
data:{
msg:\'<span>welcome</span>\'
}
}).$mount(\'#box\');
};
</script>
</head>
<body>
<div id="box">
<input type="text"v-model="msg | filterHtml">
<br>
{{msg | filterHtml}}
</div>
</body>
</html>
|
以上是 vue过滤器用法实例分析 的全部内容，
来源链接：
utcz.com/z/379244.html
