vue filter使用,vue.filter()
这篇文章主要介绍了vuefilter的四种用法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
过滤器的用法小结过滤器的基本用法
filter的用法小结
使用计算属性app.js
var app5=新Vue({
埃尔： #app5 ，
数据：{
购物清单：[
"牛奶"、"油炸圈饼"、"饼干"、"巧克力"、"花生酱“胆甾醇”、“胆甾醇(巧克力味)”、“胆战心惊(饼干味)"
],
密钥：""
},
计算值：{
filterShoppingList: function () {
//`这个`吗指向虚拟机实例
var key=this.key
var购物清单=这个。购物清单；
返回shoppingList.filter(函数（项目){
返回item.toLowerCase().indexOf(key.toLowerCase())！=-1
});
}
}
})
app.html
div id=app5
h2Vue-for/h2
保险商实验所
李v-for=购物清单中的项目
{{ item }}
/李
/ul
h2Vue-用于过滤器实现/h2
保险商实验所
筛选器键输入type=text v-model=key
Li v-for= filterShoppingList中的项目
{{ item }}
/李
/ul
/div
最终效果实现了根据关键字来过滤列表的功能。
filter的基本用法
过滤器是和数据计算方法观察一样，都是新Vue()的参数。
用于对简单数据的处理，和计算有冲突，所以从vue2.0后就对过滤器做了删减，我觉得没有过滤器完全能够用其他方法比如计算来实现
用在{{ 变量1 变量2 }} 或者v-bind:xx="变量1 变量2([参数) " 两种；其中变量一是数据的k，变量2是过滤器的k，
过滤器：{变量2:功能（变量1,参数){xxxx}}
div id=应用程序
div {{val upcaseVal(true)}}/div
div v-bind:title= val upcaseVal { { val } }/div
div{{val removeSpace}}/div
/div
脚本
var vm=new Vue({
埃尔： #app ，
数据：{
瓦尔："你好，世界"
},
过滤器：{
upcaseVal: function (val，firstUpper) {//filter里函数的参数需要特别注意第一个是指前的值，第二个是真实的
if (firstUpper) {
返回val.split(“”).地图（功能(e) {
返回e[0].toUpperCase() e.slice(1)
}).联接("")
}
返回瓦尔。toupper case()；
},
删除空间：函数(瓦尔){
return val.toUpperCase()
}
}
})
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。