vue|vue filter的四种用法小结 vuefilter的四种用法小结

filter的用法小结
filter的基本用法

filter的用法小结使用计算属性app.js

var app5 = new Vue({el: '#app5',data: {shoppingList: ["Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"],key: ""},computed: {filterShoppingList: function () {// `this` points to the vm instancevar key = this.key; var shoppingList = this.shoppingList; return shoppingList.filter(function (item) {return item.toLowerCase().indexOf(key.toLowerCase()) != -1}); ; }}})

【vue|vue filter的四种用法小结】app.html

Vue-for
{{ item }}
Vue-for filter实现
Filter Key
{{ item }}

最终效果实现了根据关键字来过滤列表的功能。

filter的基本用法 filter是和datacomputedmethods watch一样，都是new Vue（）的参数。
用于对简单数据的处理，和computed有冲突，所以从vue2.0后就对filter做了删减，我觉得没有filter完全能够用其他方法比如computed来实现
用在{{ 变量1 | 变量2 }} 或者 v-bind：xx=“变量1 | 变量2（[参数） ”两种；其中变量1是data的k，变量2是filter的k，
filter：{ 变量2：function（变量1，参数）{xxxx}}

{{val | upcaseVal(true)}}{{val}}{{val | removeSpace}}

var vm = new Vue({el: '#app',data: {val: 'hello world'},filters: {upcaseVal: function (val, firstUpper) {//filter里函数的参数需要特别注意第一个是指|前的值，第二个是trueif (firstUpper) {return val.split(' ').map(function (e) {return e[0].toUpperCase() + e.slice(1)}).join(' ')}return val.toUpperCase(); },removeSpace:function(val){return val.toUpperCase()}}})

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。