认识 Vue 中的过滤器
Vue.js这个玩意儿里还有个叫做“过滤器”的神奇东西，用它处理数据不仅简单，还能让界面看起来更加直白明了。里面就有好多好用的预设过滤器，像时间啊、钱币之类的格式转换都能搞定，当然你也可以自我定制。这样一来，不管是显示还是操作数据，都实在太简单了，谁都会爱不释手！
在编程时，老是得处理各种数据格式转换的琐事，比如把时间戳变成我们能看懂的日期，或者把数字换算成钱币这种事情都很常见。这时候，用 Vue 的滤镜就能省心不少，不仅让你的代码更清晰易懂，写起来也舒服多了！
Vue 插件的概念
Vue的插件就像是个大杂烩，只要给Vue加点东西，就能把各种功能都搞定了！这个插件里什么都有，包括全局函数、指令、过滤器等等，种类超多的让人眼晕。另外，它跟你常听说的JavaScript库还有区别，甚至还能让你亲手去调整调试！
试试看，用Vue的插件超简单！加个Vue.use()，日常功能都能搞定。无论大项目小项目，立刻就能用得得心应手，太棒了！
编写自定义过滤器的技巧
const myFilterPlugin = {
install: function(Vue) {
Vue.filter('myFilter', function(value) {
// value 是需要过滤的值
// 进行过滤操作
return filteredValue;
})
}
}
vue本身就很牛逼了，还有挺多滤镜。当然，你要是手痒想折腾，加滤镜的插件也是能自己做得出来滴！这样不管在哪儿，安个它，照片马上就变得美美的啦～
装好这个我们自己开发的Vue插件”myFilterPlugin”！这里面就包含了我们自创的筛选功能”myFilter”啦～你只要把它引用到你的Vue实例里就能用到咯。这样用起来超方便，还能让你的数据处理变得更轻松！代码写起来也会更加清晰明了哟~
常见自定义过滤器示例
{{ data | myFilter }}
别忘了教你好好操作这个插件，变成你想用的那个过滤器！看看下面几个例子，以后你就可以自己轻松搞掂编程和设置了，多个性化~
别忘了手机号码设计神器：这个小东西让你随便弄你的手机号，想加点空间就加上去，想分号就分开。
这剪刀神器大胆用，别怕：随便你怎么剪都行！特别适合嫌字多的你！
搞定！这下看起来清楚多了？所有数字都变成了兆为单位，轻松得很哟~
const phoneFilterPlugin = {
install: function(Vue) {
Vue.filter('phone', function(value) {
// 将手机号分为前三位、中间四位、后四位，并使用空格拼接起来
return value.replace(/(d{3})(d{4})(d{4})/, '$1 $2 $3');
})
}
}
这些只是刚刚开始，其实好玩又实用的自定义滤镜还有好多！
{{ phoneNum | phone }}
结语与展望
哈喽！快来学一下怎样把Vue插件变成自己的过滤器！这样写代码更帅气，还省心易维护。学会了的话，你的 APP 肯定会变得超级棒哒~
const stringFilterPlugin = {
install: function(Vue) {
Vue.filter('substring', function(value, length) {
// 对字符串进行截取操作
return value.substring(0, length) + '...';
})
}
}
想要提升前端技术？轻松试试Viue波尔特的插件功能！一边玩一边学，让你更深入理解Vue.js框架。
{{ content | substring(30) }}
评论0