理解 Vue.js 中的 Filters
这 Vue.js 真的超赞！做前端就和玩儿乐高一样，还有滤镜这种神器，让数据穿上漂亮且整洁的外衣。用上这些滤镜，你的程序瞬间变美，之后改起来也轻松多了！
创建自定义 Filter
你们知道怎么在 Vue.js 里用 filter 处理数据吗？超简单，只要利用下 Vue.filter 这个东西就成了！你只要告诉它你想要什么名字的 filter，以及处理函数是什么。比如，假设你希望有个”capitalize”过滤器，可以把每个词的首字母变成大写，那就照这样操作~
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
过滤器厉害得很，不只可以用来处理全数列，还能挑拣或改变其中的元素。举个例子，设个”排除空格”的选项，轻轻松松就能把所有带着空格的元素去掉，省心又省力处理数据不再是难事！
{{ message | capitalize }}
日期格式化 Filter
说实话，搞编程，日期得看得顺眼才舒服。有了Vue.js和moment.js这个黄金搭档，日期就变得轻而易举。美化日期也不难，手动加个Filter就OK！比如我用formatDate的Filter就能将日期变成那种MM/DD/YYYY hh:mm的样式，好看多了。
Vue.filter('excludeSpaces', function (arr) {
return arr.filter(function (item) {
return item.indexOf(' ') < 0
})
})
简单来说，用Filters就能把数字变成漂亮晃眼的钱币样式！只需要加个名为”formatPrice”的Filter就好了，然后直接往模板里面塞进去就欧了。
{{ ['Hello World', 'Vue Developer', 'Goodbye'] | excludeSpaces }}
结合计算属性优化 Filters 功能
Vue.js中有个牛逼的功能叫计算属性，这个东西可以让你随便改数据，还不用担心会弄乱架构。就拿test来说，这个只是简单的改了个名字，变成tEst，只需要搞个包含大小写和长度的计算属性就行了，就像变魔术那样直接在模版里面用起来！
说实话，Vue.js这个Filter功能真的牛！格式化什么的都有，再复杂问题也不怕，越用越好使，代码写得工整流畅，舒服极了。以后维护也轻松啦～
Vue.filter('formatDate', function (value) {
if (value) {
return moment(String(value)).format('MM/DD/YYYY hh:mm')
}
})
不知道你们用没用过Vue的filter功能？赶紧试试！效果超赞！效率高高哒！
{{ date | formatDate }}
如何进一步优化使用 Filters？
你知道吗？那些我们以前学过的过滤器，实在是小儿科。真正的挑战在后面！你想要搞定大项目的话，就赶紧把常用的过滤器变成插件或全局注册，那样找起来可太方便了！找不到头绪的时候，别忘了还有正则表达式这个神奇工具，真的能解决大问题~
如何避免 Filters 滥用？
Vue.filter('formatPrice', function (value) {
if (!value) return ''
let val = (value / 1).toFixed(2).replace(',', '.')
return '$' + val.toString().replace(/B(?=(d{3})+(?!d))/g, ',')
})
哦Filter这玩意儿好用，可别用得过度了否则你电脑可得速度慢下来了。为啥？因为每个Filter都忙着处理大量数据，像个加班狗似的！所以我们在设计Filter时得简单点儿，免得累人。当然，也可能是你经常切换界面，这时候或许可以考虑把数据交给Filter去理。
结语
{{ price | formatPrice }}
告诉你，Vue里面那个Filter，就像是个贴心的小帮手，能帮我们快速处理数据。这样子用起来方便多了，代码也简单明了，网页加载速度也会变快！想让你的Vue应用飞速运行？赶紧试试这个神器般的Filter！
评论0