{"id":33534,"date":"2024-11-25T17:04:15","date_gmt":"2024-11-25T09:04:15","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33534\/"},"modified":"2024-11-25T17:04:15","modified_gmt":"2024-11-25T09:04:15","slug":"%e5%be%ae%e4%bf%a1%e5%b0%8f%e7%a8%8b%e5%ba%8f%e5%a6%82%e4%bd%95%e5%8a%a8%e6%80%81%e6%b7%bb%e5%8a%a0%e5%86%85%e5%ae%b9","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33534\/","title":{"rendered":"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5982\u4f55\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9"},"content":{"rendered":"<blockquote><p>\n  \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u7684\u65b9\u6cd5\uff1a\u9996\u5148\u6dfb\u52a0\u4e00\u4e2afor\uff0c\u5faa\u73afview\uff1b\u7136\u540einput\u7ed1\u5b9a\u4e00\u4e2a\u8f93\u5165\u4e8b\u4ef6\uff0c\u5e76\u4e14\u83b7\u53d6\u88c5input\u7684view\u5757\u7684\u7d22\u5f15\uff1b\u6700\u540e\u901a\u8fc7\u7d22\u5f15\u503c\u6765\u4fee\u6539\u6570\u7ec4\u4e2d\u7684\u503c\u5373\u53ef\u3002\n<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/202008\/13\/2020081313131243768.jpg\" class=\"aligncenter\" title=\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5982\u4f55\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u63d2\u56fe\" alt=\"\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5982\u4f55\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u63d2\u56fe\" \/><\/p>\n<p><strong>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u7684\u65b9\u6cd5\uff1a<\/strong><\/p>\n<p>1. wx:for \u5faa\u73afview\uff0c\u6dfb\u52a0\u4e00\u4e2a\uff0cwx:for\u7684\u5185\u5bb9\u5c31\u589e\u52a01\u4e2a\uff0c\u90a3\u4e48\u5faa\u73af\u7684\u5185\u5bb9\u662f\u7528\u6570\u5b57\u6765\u5faa\u73af\u8fd8\u662f\u6570\u7ec4\u5462\uff1f<\/p>\n<p>2. input\u662f\u5faa\u73af\u51fa\u6765\u7684\uff0c\u6240\u4ee5\u4e0d\u53ef\u80fd\u7ed9\u4e0d\u540c\u7684input\u7ed1\u5b9a\u4e0d\u540c\u7684 bindInput \u4e8b\u4ef6\uff0c\u90a3\u4e48\u53ea\u6709\u7ed1\u5b9a\u4e00\u4e2a\u8f93\u5165\u4e8b\u4ef6\uff0c\u800c\u4e14\u6240\u6709\u7684\u503c\u5fc5\u987b\u662f\u4e00\u4e2a\u6570\u7ec4\u7684\u8bdd\uff0c\u5c31\u5fc5\u987b\u8981\u83b7\u53d6\u5230\u88c5input\u7684view\u5757\u7684\u7d22\u5f15\uff0c\u7136\u540e\u901a\u8fc7\u7d22\u5f15\u503c\u6765\u4fee\u6539\u6570\u7ec4\u4e2d\u7684\u503c\u3002\u3002<\/p>\n<p>3. \u5220\u9664\u7684\u8bdd\uff0c\u5982\u679c\u5faa\u73af\u7684\u5185\u5bb9\u662f\u6570\u5b57\uff0c\u90a3\u4e48\u5c31\u53ea\u6709\u6570\u5b57\u51cf\u4e00\uff0c\u6700\u7ec8\u5220\u9664\u7684\u53ea\u6709\u6700\u540e\u4e00\u4e2a\u3002\u90a3\u4e48\u5faa\u73af\u7684\u5185\u5bb9\u5c31\u53ea\u80fd\u662f\u6570\u7ec4\u4e86\u3002\u53ea\u8981\u83b7\u53d6\u5230\u5f53\u524d\u9700\u8981\u5220\u9664\u7684\u7d22\u5f15\u503c\uff0c\u7136\u540e\u5220\u9664\u5faa\u73af\u5185\u5bb9\u5bf9\u5e94\u7684\u503c\u5c31\u5b8c\u6210\u4e86\u3002<\/p>\n<blockquote>\n<p>\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a<\/p>\n<\/blockquote>\n<p>\u5148\u6765\u770b\u770b\u6548\u679c\uff1a<\/p>\n<p>wxml\uff1a<\/p>\n<pre>&lt;view&gt;\u589e\u52a0&lt;\/view&gt;&lt;view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\u5220\u9664&lt;\/view&gt;\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt;&nbsp;&nbsp;&nbsp;&nbsp;\n&lt;\/view&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\uff081\uff09 \u5faa\u73af\u7684array\u662f\u4e00\u4e2a\u6570\u7ec4<\/p>\n<p>\uff082\uff09 \u5220\u9664\u548cinput\u90fd\u52a0\u4e86data-idx\u5c5e\u6027\u662f\u56e0\u4e3a\u90fd\u9700\u8981\u7528\u5230\u5f53\u524d\u7d22\u5f15\u503c\u3002<\/p>\n<p>wxss:<\/p>\n<pre>.add{\n&nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block;\n&nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;30px;\n&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0&nbsp;12px;\n&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;skyblue;\n}\n.box{\n&nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;10px;\n&nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both;\n&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;\n&nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0&nbsp;15px;\n}\n.b-ipt{\n&nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;\n&nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#ccc;\n}\n.del{\n&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;40px;\n&nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;right;\n&nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;10px;\n}<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>js:<\/p>\n<pre>data:&nbsp;{\n&nbsp;&nbsp;&nbsp;&nbsp;array:[0],\/\/\u9ed8\u8ba4\u663e\u793a\u4e00\u4e2a\n&nbsp;&nbsp;&nbsp;&nbsp;inputVal:[]\/\/\u6240\u6709input\u7684\u5185\u5bb9\n},\n\/\/\u83b7\u53d6input\u7684\u503c\ngetInputVal:function(e){\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;nowIdx=e.currentTarget.dataset.idx;\/\/\u83b7\u53d6\u5f53\u524d\u7d22\u5f15\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val=e.detail.value;\/\/\u83b7\u53d6\u8f93\u5165\u7684\u503c\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oldVal=this.data.inputVal;\n&nbsp;&nbsp;&nbsp;&nbsp;oldVal[nowIdx]=val;\/\/\u4fee\u6539\u5bf9\u5e94\u7d22\u5f15\u503c\u7684\u5185\u5bb9\n&nbsp;&nbsp;&nbsp;&nbsp;this.setData({\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inputVal:oldVal\n&nbsp;&nbsp;&nbsp;&nbsp;})\n},\n\/\/\u6dfb\u52a0input\naddInput:function(){\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;old=this.data.array;\n&nbsp;&nbsp;&nbsp;&nbsp;old.push(1);\/\/\u8fd9\u91cc\u4e0d\u7ba1push\u4ec0\u4e48\uff0c\u53ea\u8981\u6570\u7ec4\u957f\u5ea6\u589e\u52a01\u5c31\u884c\n&nbsp;&nbsp;&nbsp;&nbsp;this.setData({\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;array:&nbsp;old\n&nbsp;&nbsp;&nbsp;&nbsp;})\n},\n\/\/\u5220\u9664input\ndelInput:function(e){\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;nowidx=e.currentTarget.dataset.idx;\/\/\u5f53\u524d\u7d22\u5f15\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oldInputVal=this.data.inputVal;\/\/\u6240\u6709\u7684input\u503c\n&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;oldarr=this.data.array;\/\/\u5faa\u73af\u5185\u5bb9\n&nbsp;&nbsp;&nbsp;&nbsp;oldarr.splice(nowidx,1);&nbsp;&nbsp;&nbsp;&nbsp;\/\/\u5220\u9664\u5f53\u524d\u7d22\u5f15\u7684\u5185\u5bb9\uff0c\u8fd9\u6837\u5c31\u80fd\u5220\u9664view\u4e86\n&nbsp;&nbsp;&nbsp;&nbsp;oldInputVal.splice(nowidx,1);\/\/view\u5220\u9664\u4e86\u5bf9\u5e94\u7684input\u503c\u4e5f\u8981\u5220\u6389\n&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(oldarr.length&nbsp;&lt;p&gt;&nbsp;\uff081\uff09 array[0]\u8868\u793a\u6700\u521d\u9700\u8981\u5faa\u73af\u4e00\u6b21\uff0c\u56e0\u4e3awx:for\u662f\u6839\u636e\u6570\u7ec4\u957f\u5ea6\u6765\u5faa\u73af\u7684\u3002array\u91cc\u9762\u7684\u5185\u5bb9\u968f\u4fbf\u5199\uff0c\u53ea\u8981\u4fdd\u8bc1\u957f\u5ea6\u4e3a1\u5c31\u884c&lt;\/p&gt;&lt;p&gt;\uff082\uff09 \u5982\u679c\u4f60\u62c5\u5fc3input\u8f93\u5165\u7684\u65f6\u5019\u6bcf\u6b21\u90fd\u8981\u53bb\u53d6\u7d22\u5f15\u503c\u5f71\u54cd\u6027\u80fd\uff0c\u6211\u5efa\u8bae\u4f60\u53ef\u4ee5\u628a\u83b7\u53d6input\u503c\u7684\u4e8b\u4ef6\u7531 bindinput \u6539\u6210&nbsp; bindblur \u3002\u8fd9\u6837\u4e5f\u6ca1\u95ee\u9898\u3002&lt;\/p&gt;&lt;blockquote&gt;&lt;p&gt;\u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a&lt;a href=\"https:\/\/www.php.cn\/course.html\" target=\"_blank\"&gt;\u7f16\u7a0b\u89c6\u9891&lt;\/a&gt;&lt;\/p&gt;&lt;\/blockquote&gt;<\/pre>\n<p> \u767b\u5f55\u540e\u590d\u5236 <\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5982\u4f55\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\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":"<p>\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u7684\u65b9\u6cd5\uff1a\u9996\u5148\u6dfb\u52a0\u4e00\u4e2afor\uff0c\u5faa\u73afview\uff1b\u7136\u540einput\u7ed1\u5b9a\u4e00\u4e2a\u8f93\u5165\u4e8b\u4ef6\uff0c\u5e76\u4e14\u83b7\u53d6\u88c5input\u7684view\u5757\u7684\u7d22\u5f15\uff1b\u6700\u540e\u901a\u8fc7\u7d22\u5f15\u503c\u6765\u4fee\u6539\u6570\u7ec4\u4e2d\u7684\u503c\u5373\u53ef\u3002 \u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u52a8\u6001\u6dfb\u52a0\u5185\u5bb9\u7684\u65b9\u6cd5\uff1a 1. wx:for \u5faa\u73afview\uff0c\u6dfb\u52a0\u4e00\u4e2a\uff0cwx:for\u7684\u5185\u5bb9\u5c31\u589e\u52a01\u4e2a\uff0c\u90a3\u4e48\u5faa\u73af\u7684\u5185\u5bb9\u662f\u7528\u6570\u5b57\u6765\u5faa\u73af\u8fd8\u662f\u6570\u7ec4\u5462\uff1f 2. input\u662f\u5faa\u73af\u51fa\u6765\u7684\uff0c\u6240\u4ee5\u4e0d\u53ef\u80fd\u7ed9\u4e0d\u540c\u7684input\u7ed1\u5b9a\u4e0d\u540c\u7684 bindInput \u4e8b\u4ef6\uff0c\u90a3\u4e48\u53ea\u6709\u7ed1\u5b9a\u4e00\u4e2a\u8f93\u5165\u4e8b\u4ef6\uff0c\u800c\u4e14\u6240\u6709\u7684\u503c\u5fc5\u987b\u662f\u4e00\u4e2a\u6570\u7ec4\u7684\u8bdd\uff0c\u5c31\u5fc5\u987b\u8981\u83b7\u53d6\u5230\u88c5input\u7684view\u5757\u7684\u7d22\u5f15\uff0c\u7136\u540e\u901a\u8fc7\u7d22\u5f15\u503c\u6765\u4fee\u6539\u6570\u7ec4\u4e2d\u7684\u503c\u3002\u3002 3. \u5220\u9664\u7684\u8bdd\uff0c\u5982\u679c\u5faa\u73af\u7684\u5185\u5bb9\u662f\u6570\u5b57\uff0c\u90a3\u4e48\u5c31\u53ea\u6709\u6570\u5b57\u51cf\u4e00\uff0c\u6700\u7ec8\u5220\u9664\u7684\u53ea\u6709\u6700\u540e\u4e00\u4e2a\u3002\u90a3\u4e48\u5faa\u73af\u7684\u5185\u5bb9\u5c31\u53ea\u80fd\u662f\u6570\u7ec4\u4e86\u3002\u53ea\u8981\u83b7\u53d6\u5230\u5f53\u524d\u9700\u8981\u5220\u9664\u7684\u7d22\u5f15\u503c\uff0c\u7136\u540e\u5220\u9664\u5faa\u73af\u5185\u5bb9\u5bf9\u5e94\u7684\u503c\u5c31\u5b8c\u6210\u4e86\u3002 \u76f8\u5173\u5b66\u4e60\u63a8\u8350\uff1a \u5148\u6765\u770b\u770b\u6548\u679c\uff1a wxml\uff1a &lt;view&gt;\u589e\u52a0&lt;\/view&gt;&lt;view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;view&gt;\u5220\u9664&lt;\/view&gt; &nbsp;&nbsp;&nbsp;&nbsp;&lt;input&gt;&nbsp;&nbsp;&nbsp;&nbsp; &lt;\/view&gt; \u767b\u5f55\u540e\u590d\u5236 \uff081\uff09 \u5faa\u73af\u7684array\u662f\u4e00\u4e2a\u6570\u7ec4 \uff082\uff09 \u5220\u9664\u548cinput\u90fd\u52a0\u4e86data-idx\u5c5e\u6027\u662f\u56e0\u4e3a\u90fd\u9700\u8981\u7528\u5230\u5f53\u524d\u7d22\u5f15\u503c\u3002 wxss: .add{ &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;inline-block; &nbsp;&nbsp;&nbsp;&nbsp;line-height:&nbsp;30px; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0&nbsp;12px; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;skyblue; } .box{ &nbsp;&nbsp;&nbsp;&nbsp;margin-top:&nbsp;10px; &nbsp;&nbsp;&nbsp;&nbsp;clear:&nbsp;both; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;padding:&nbsp;0&nbsp;15px; } .b-ipt{ &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden; &nbsp;&nbsp;&nbsp;&nbsp;border:&nbsp;1px&nbsp;solid&nbsp;#ccc; } .del{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;40px; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;right; &nbsp;&nbsp;&nbsp;&nbsp;margin-left:&nbsp;10px; } \u767b\u5f55\u540e\u590d\u5236 js: data:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;array:[0],\/\/\u9ed8\u8ba4\u663e\u793a\u4e00\u4e2a &nbsp;&nbsp;&nbsp;&nbsp;inputVal:[]\/\/\u6240\u6709input\u7684\u5185\u5bb9 }, \/\/\u83b7\u53d6input\u7684\u503c getInputVal:function(e){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;nowIdx=e.currentTarget.dataset.idx;\/\/\u83b7\u53d6\u5f53\u524d\u7d22\u5f15 &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;val=e.detail.value;\/\/\u83b7\u53d6\u8f93\u5165\u7684\u503c [&hellip;]<\/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-33534","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33534","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=33534"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33534\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33534"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33534"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}