扣丁学堂HTML5培训之vue过滤器用法实例分析
今天扣丁学堂HTML5培训老师给大家分享一篇关于vue过滤器用法实例分析详解，结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项，下面我们一起来看一下吧。
HTML5培训
过滤器:
vue提供过滤器:
capitalize uppercase currency....
<div id="box">
{{msg|currency ￥}}
</div>
debounce 配合事件，延迟执行
<div id="box">
<input type="text" @keyup="show | debounce 2000">
</div>数据配合使用过滤器:
limitBy限制几个
limitBy参数(取几个)
limitBy取几个从哪开始
<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>filterBy过滤数据
filterBy'谁'
<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>orderBy排序
orderBy谁1/-1
1->正序
2->倒序
<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
Vue.filter(name,function(input){
});
<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>时间转化器
<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>过滤html标记
双向过滤器:*
Vue.filter('filterHtml',{
read:function(input){ //model-view
return input.replace(/<[^<+]>/g,'');
},
write:function(val){ //view -> model
return val;
}
});数据->视图
model->view
view->model
<!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>以上就是关于扣丁学堂HTML5培训之vue过滤器用法实例分析的详细介绍，希望对大家的学习有所帮助，想要了解更多关于HTML5开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。
H5进阶课程：https://ke.qq.com/course/387348?flowToken=1008605【扫码进入前端H5架构师进阶VIP体验课】
H5基础课程：https://ke.qq.com/course/320523?flowToken=1008606【扫码进入HTML5前端开发VIP免费公开课】
注：点击(了解更多)进入课程直播间
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15