filter使用案例总结
时间：2022-9-4作者：未知来源：争怎路由网人气：
- change"> <!--用户从input输入的数据在回传到model之前也可以先处理--> </p> <script type="text/javascript"> Vue.filter("change", { read: function (value) { // model -> view 在更新 `<input>` 元素之前格式化值 return value; }, write: function (newVal,oldVal) { // view -> model 在写回数据之前格式化值 console.log("newVal:"+newVal); console.log("oldVal:"+oldVal); return newVal; } }); var myVue = new Vue({ el: ".test", data: { message:12 }, filters: { sum: function (value) { return value + 4; }, cal: function (value, begin, xing) { return value + begin + xing; } } }); </script> </body> </html>
2、使用js中的迭代函数filter
（1）实例一原文
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 instance var key = this.key; var shoppingList = this.shoppingList; //在使用filter时需要注意的是，前面调用的是需要使用filter的数组，而给filter函数传入的是数组中的每个item，也就是说filter里面的函数，是每个item要去做的，并将每个结果返回。 return shoppingList.filter(function (item) { return item.toLowerCase().indexOf(key.toLowerCase()) != -1 });; } } }) <ul> Filter Key<input type="text" v-model="key"> <li v-for="item in filterShoppingList"> {{ item }} </li> </ul>最终效果实现了根据关键字来过滤列表的功能。
其他的一些Js 迭代方法——filter()、map()、some()、every()、forEach()、lastIndexOf()、indexOf()
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上就是filter使用案例总结的详细内容，更多请关注php中文网其它相关文章！
微信提供公众平台、朋友圈、消息推送等功能，用户可以通过“摇一摇”、“搜索号码”、“附近的人”、扫二维码方式添加好友和关注公众平台，同时微信将内容分享给好友以及将用户看到的精彩内容分享到微信朋友圈。
关键词：filter运用案例总结