{"id":31535,"date":"2024-11-25T10:34:58","date_gmt":"2024-11-25T02:34:58","guid":{"rendered":"https:\/\/fwq.ai\/blog\/31535\/"},"modified":"2024-11-25T10:34:58","modified_gmt":"2024-11-25T02:34:58","slug":"filter%e4%bd%bf%e7%94%a8%e6%a1%88%e4%be%8b%e6%80%bb%e7%bb%93","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/31535\/","title":{"rendered":"filter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3"},"content":{"rendered":"

\u8fd9\u6b21\u7ed9\u5927\u5bb6\u5e26\u6765filter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3\uff0c\u4f7f\u7528filter\u7684\u6709\u54ea\u4e9b\uff0c\u4e0b\u9762\u5c31\u662f\u5b9e\u6218\u6848\u4f8b\uff0c\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\u3002<\/p>\n

1\u3001\u81ea\u5b9a\u4e49\u7684\uff0c\u5f53\u7136\u8fd9\u5305\u62ec\u6ce8\u518c\u5728\u5168\u5c40\u548c\u6ce8\u518c\u5728\u5b9e\u4f8b\u5316\u7684\u5185\u90e8<\/p>\n

\uff081\uff09\u6ce8\u518c\u5728\u5168\u5c40\u7684fliter <\/strong><\/p>\n

(1)\u5168\u5c40\u65b9\u6cd5 Vue.filter() \u6ce8\u518c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668,\u5fc5\u987b\u653e\u5728Vue\u5b9e\u4f8b\u5316\u524d\u9762<\/p>\n

(2) \u8fc7\u6ee4\u5668\u51fd\u6570\u59cb\u7ec8\u4ee5\u7684\u503c\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u89c6\u4e3a\uff0c\u800c\u4e0d\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u6309\u8868\u8fbe\u5f0f\u8ba1\u7b97<\/p>\n

(3)\u53ef\u4ee5\u8bbe\u7f6e\u4e24\u4e2a\u8fc7\u6ee4\u5668\u53c2\u6570,\u524d\u63d0\u662f\u8fd9\u4e24\u4e2a\u8fc7\u6ee4\u5668\u5904\u7406\u7684\u4e0d\u51b2\u7a81<\/p>\n

(4)\u7528\u6237\u4eceinput\u8f93\u5165\u7684\u6570\u636e\u5728\u56de\u4f20\u5230model\u4e4b\u524d\u4e5f\u53ef\u4ee5\u5148\u5904\u7406<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>vue\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668<\/title>\r\n    <script src=\"..\/js\/vue.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" \/>\r\n  <\/head>\r\n  <body>\r\n    <p class=\"test\">\r\n      <p>{{message | sum}}<\/p>\r\n      <p>{{message | cal 10 20}}<\/p> <!--\u8fc7\u6ee4\u5668\u51fd\u6570\u59cb\u7ec8\u4ee5\u8868\u8fbe\u5f0f\u7684\u503c\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u89c6\u4e3a\u5b57\u7b26\u4e32\uff0c\u800c\u4e0d\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u6309\u8868\u8fbe\u5f0f\u8ba1\u7b97\u3002-->\r\n      <p>{{message | sum | currency }}<\/p> <!--\u6dfb\u52a0\u4e24\u4e2a\u8fc7\u6ee4\u5668,\u6ce8\u610f\u4e0d\u8981\u51b2\u7a81-->\r\n      <input type=\"text\" v-model=\"message | change\"> <!--\u7528\u6237\u4eceinput\u8f93\u5165\u7684\u6570\u636e\u5728\u56de\u4f20\u5230model\u4e4b\u524d\u4e5f\u53ef\u4ee5\u5148\u5904\u7406-->\r\n    <\/p>\r\n    <script type=\"text\/javascript\">\r\n\/\/    -----------------------------------------\u534e\u4e3d\u5206\u5272\u7ebf(\u4ecemodel->view)---------------------------------------\r\n      Vue.filter(\"sum\", function(value) {  \/\/\u5168\u5c40\u65b9\u6cd5 Vue.filter() \u6ce8\u518c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668,\u5fc5\u987b\u653e\u5728Vue\u5b9e\u4f8b\u5316\u524d\u9762\r\n        return value + 4;\r\n      });\r\n      Vue.filter('cal', function (value, begin, xing) {  \/\/\u5168\u5c40\u65b9\u6cd5 Vue.filter() \u6ce8\u518c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668,\u5fc5\u987b\u653e\u5728Vue\u5b9e\u4f8b\u5316\u524d\u9762\r\n        return value + begin + xing;\r\n      });\r\n\/\/    -----------------------------------------\u534e\u4e3d\u5206\u5272\u7ebf(\u4eceview->model)---------------------------------------\r\n      Vue.filter(\"change\", {\r\n        read: function (value) { \/\/ model -> view \u5728\u66f4\u65b0 `<input>` \u5143\u7d20\u4e4b\u524d\u683c\u5f0f\u5316\u503c\r\n          return value;\r\n        },\r\n        write: function (newVal,oldVal) { \/\/ view -> model \u5728\u5199\u56de\u6570\u636e\u4e4b\u524d\u683c\u5f0f\u5316\u503c\r\n          console.log(\"newVal:\"+newVal); \r\n          console.log(\"oldVal:\"+oldVal);\r\n          return newVal;\r\n        }\r\n      });\r\n      var myVue = new Vue({\r\n        el: \".test\",\r\n        data: {\r\n          message:12\r\n        }\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
filter\u662f\u9ed8\u8ba4\u4f1a\u4f20\u5165\u5f53\u524d\u7684item\uff0c\u800c\u4e14filter\u7684\u7b2c\u4e00\u4e2a\u53c2\u6570\u9ed8\u8ba4\u5c31\u662f\u5f53\u524d\u7684item\u3002<\/p>\n
\uff082\uff09\u6ce8\u518c\u5728\u5b9e\u4f8b\u5316\u5185\u90e8<\/strong><\/p>\n
\u4e0a\u9762\u7684\u4f8b\u5b50\u76f4\u63a5\u6ce8\u518c\u5728Vue\u5168\u5c40\u4e0a\u9762,\u5176\u4ed6\u4e0d\u7528\u8fd9\u4e2a\u8fc7\u6ee4\u5668\u7684\u5b9e\u4f8b\u4e5f\u4f1a\u88ab\u8feb\u63a5\u53d7,\u5176\u5b9e\u8fc7\u6ee4\u5668\u53ef\u4ee5\u6ce8\u518c\u5728\u5b9e\u4f8b\u5185\u90e8,\u4ec5\u5728\u4f7f\u7528\u5b83\u7684\u5b9e\u4f8b\u91cc\u9762\u6ce8\u518c<\/p>\n
 \u4e0a\u9762\u7684\u7a0b\u5e8f\u6539\u5199\u4e3a:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n  <head>\r\n    <meta charset=\"UTF-8\">\r\n    <title>vue\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668<\/title>\r\n    <script src=\"..\/js\/vue.js\" type=\"text\/javascript\" charset=\"utf-8\"><\/script>\r\n    <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" \/>\r\n  <\/head>\r\n  <body>\r\n    <p class=\"test\">\r\n      <p>{{message | sum}}<\/p>\r\n      <p>{{message | cal 10 20}}<\/p> <!--\u8fc7\u6ee4\u5668\u51fd\u6570\u59cb\u7ec8\u4ee5\u8868\u8fbe\u5f0f\u7684\u503c\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u89c6\u4e3a\u5b57\u7b26\u4e32\uff0c\u800c\u4e0d\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u6309\u8868\u8fbe\u5f0f\u8ba1\u7b97\u3002-->\r\n      <p>{{message | sum | currency }}<\/p> <!--\u6dfb\u52a0\u4e24\u4e2a\u8fc7\u6ee4\u5668,\u6ce8\u610f\u4e0d\u8981\u51b2\u7a81-->\r\n      <input type=\"text\" v-model=\"message | change\"> <!--\u7528\u6237\u4eceinput\u8f93\u5165\u7684\u6570\u636e\u5728\u56de\u4f20\u5230model\u4e4b\u524d\u4e5f\u53ef\u4ee5\u5148\u5904\u7406-->\r\n    <\/p>\r\n    <script type=\"text\/javascript\">\r\n      Vue.filter(\"change\", {\r\n        read: function (value) { \/\/ model -> view \u5728\u66f4\u65b0 `<input>` \u5143\u7d20\u4e4b\u524d\u683c\u5f0f\u5316\u503c\r\n          return value;\r\n        },\r\n        write: function (newVal,oldVal) { \/\/ view -> model \u5728\u5199\u56de\u6570\u636e\u4e4b\u524d\u683c\u5f0f\u5316\u503c\r\n          console.log(\"newVal:\"+newVal); \r\n          console.log(\"oldVal:\"+oldVal);\r\n          return newVal;\r\n        }\r\n      });\r\n      var myVue = new Vue({\r\n        el: \".test\",\r\n        data: {\r\n          message:12\r\n        },\r\n        filters: {\r\n          sum: function (value) {\r\n            return value + 4;\r\n          },\r\n          cal: function (value, begin, xing) {\r\n            return value + begin + xing;\r\n          }\r\n        }\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
2\u3001\u4f7f\u7528js\u4e2d\u7684\u8fed\u4ee3\u51fd\u6570filter<\/p>\n
\"filter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3\u63d2\u56fe\" <\/p>\n
\uff081\uff09\u5b9e\u4f8b\u4e00\u539f\u6587<\/p>\n
var app5 = new Vue({\r\n  el: '#app5',\r\n  data: {\r\n    shoppingList: [\r\n      \"Milk\", \"Donuts\", \"Cookies\", \"Chocolate\", \"Peanut Butter\", \"Pepto Bismol\", \"Pepto Bismol (Chocolate flavor)\", \"Pepto Bismol (Cookie flavor)\"\r\n    ],\r\n    key: \"\"\r\n  },\r\n  computed: {\r\n    filterShoppingList: function () {\r\n      \/\/ `this` points to the vm instance\r\n      var key = this.key;\r\n      var shoppingList = this.shoppingList;\r\n      \/\/\u5728\u4f7f\u7528filter\u65f6\u9700\u8981\u6ce8\u610f\u7684\u662f\uff0c\u524d\u9762\u8c03\u7528\u7684\u662f\u9700\u8981\u4f7f\u7528filter\u7684\u6570\u7ec4\uff0c\u800c\u7ed9filter\u51fd\u6570\u4f20\u5165\u7684\u662f\u6570\u7ec4\u4e2d\u7684\u6bcf\u4e2aitem\uff0c\u4e5f\u5c31\u662f\u8bf4filter\u91cc\u9762\u7684\u51fd\u6570\uff0c\u662f\u6bcf\u4e2aitem\u8981\u53bb\u505a\u7684\uff0c\u5e76\u5c06\u6bcf\u4e2a\u7ed3\u679c\u8fd4\u56de\u3002\r\n      return shoppingList.filter(function (item) {\r\n        return item.toLowerCase().indexOf(key.toLowerCase()) != -1\r\n      });;\r\n    }\r\n  }\r\n})\r\n <ul>\r\n  Filter Key<input type=\"text\" v-model=\"key\">  \r\n    <li v-for=\"item in filterShoppingList\">\r\n      {{ item }}\r\n    <\/li>\r\n  <\/ul><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u6700\u7ec8\u6548\u679c\u5b9e\u73b0\u4e86\u6839\u636e\u5173\u952e\u5b57\u6765\u8fc7\u6ee4\u5217\u8868\u7684\u529f\u80fd\u3002<\/p>\n
\"filter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3\u63d2\u56fe1\" <\/p>\n
 \u5176\u4ed6\u7684\u4e00\u4e9bJs \u8fed\u4ee3\u65b9\u6cd5\u2014\u2014filter()\u3001map()\u3001some()\u3001every()\u3001forEach()\u3001lastIndexOf()\u3001indexOf()<\/p>\n
\u76f8\u4fe1\u770b\u4e86\u672c\u6587\u6848\u4f8b\u4f60\u5df2\u7ecf\u638c\u63e1\u4e86\u65b9\u6cd5\uff0c\u66f4\u591a\u7cbe\u5f69\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n
\u63a8\u8350\u9605\u8bfb\uff1a<\/p>\n
<\/p>\n
<\/p>\n
\u4ee5\u4e0a\u5c31\u662ffilter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u8fd9\u6b21\u7ed9\u5927\u5bb6\u5e26\u6765filter\u4f7f\u7528\u6848\u4f8b\u603b\u7ed3\uff0c\u4f7f\u7528filter\u7684\u6709\u54ea\u4e9b\uff0c\u4e0b\u9762\u5c31\u662f\u5b9e\u6218\u6848\u4f8b\uff0c\u4e00\u8d77\u6765\u770b\u4e00\u4e0b\u3002 1\u3001\u81ea\u5b9a\u4e49\u7684\uff0c\u5f53\u7136\u8fd9\u5305\u62ec\u6ce8\u518c\u5728\u5168\u5c40\u548c\u6ce8\u518c\u5728\u5b9e\u4f8b\u5316\u7684\u5185\u90e8 \uff081\uff09\u6ce8\u518c\u5728\u5168\u5c40\u7684fliter (1)\u5168\u5c40\u65b9\u6cd5 Vue.filter() \u6ce8\u518c\u4e00\u4e2a\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668,\u5fc5\u987b\u653e\u5728Vue\u5b9e\u4f8b\u5316\u524d\u9762 (2) \u8fc7\u6ee4\u5668\u51fd\u6570\u59cb\u7ec8\u4ee5\u7684\u503c\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u89c6\u4e3a\uff0c\u800c\u4e0d\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u6309\u8868\u8fbe\u5f0f\u8ba1\u7b97 (3)\u53ef\u4ee5\u8bbe\u7f6e\u4e24\u4e2a\u8fc7\u6ee4\u5668\u53c2\u6570,\u524d\u63d0\u662f\u8fd9\u4e24\u4e2a\u8fc7\u6ee4\u5668\u5904\u7406\u7684\u4e0d\u51b2\u7a81 (4)\u7528\u6237\u4eceinput\u8f93\u5165\u7684\u6570\u636e\u5728\u56de\u4f20\u5230model\u4e4b\u524d\u4e5f\u53ef\u4ee5\u5148\u5904\u7406 <!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>vue\u81ea\u5b9a\u4e49\u8fc7\u6ee4\u5668<\/title> <script src=”..\/js\/vue.js” type=”text\/javascript” charset=”utf-8″><\/script> <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no” \/> <\/head> <body> <p class=”test”> <p>{{message | sum}}<\/p> <p>{{message | cal 10 20}}<\/p> <!–\u8fc7\u6ee4\u5668\u51fd\u6570\u59cb\u7ec8\u4ee5\u8868\u8fbe\u5f0f\u7684\u503c\u4f5c\u4e3a\u7b2c\u4e00\u4e2a\u53c2\u6570\u3002\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u89c6\u4e3a\u5b57\u7b26\u4e32\uff0c\u800c\u4e0d\u5e26\u5f15\u53f7\u7684\u53c2\u6570\u6309\u8868\u8fbe\u5f0f\u8ba1\u7b97\u3002–> <p>{{message | sum | currency }}<\/p> <!–\u6dfb\u52a0\u4e24\u4e2a\u8fc7\u6ee4\u5668,\u6ce8\u610f\u4e0d\u8981\u51b2\u7a81–> <input type=”text” v-model=”message | change”> <!–\u7528\u6237\u4eceinput\u8f93\u5165\u7684\u6570\u636e\u5728\u56de\u4f20\u5230model\u4e4b\u524d\u4e5f\u53ef\u4ee5\u5148\u5904\u7406–> <\/p> <script type=”text\/javascript”> \/\/ […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-31535","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31535","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=31535"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/31535\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=31535"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=31535"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=31535"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}