脚本宝典收集整理的这篇文章主要介绍了扣丁学堂HTML5培训之vue过滤器用法实例分析，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
今天扣丁学堂HTML5培训老师给大家分享一篇关于vue过滤器用法实例分析详解，结合实例形式总结分析了vue.js常见过滤器相关使用技巧与操作注意事项，下面我们一起来看一下吧。
过滤器:
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(/<1>/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从入门到精通开发实战技能。
以上是脚本宝典为你收集整理的扣丁学堂HTML5培训之vue过滤器用法实例分析全部内容，希望文章能够帮你解决扣丁学堂HTML5培训之vue过滤器用法实例分析所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。