{"id":1270,"date":"2019-09-12T22:30:24","date_gmt":"2019-09-12T14:30:24","guid":{"rendered":"https:\/\/www.develop-note.com\/blog\/?p=1270"},"modified":"2022-02-17T15:17:27","modified_gmt":"2022-02-17T07:17:27","slug":"2020ironman-svelte-html-binding","status":"publish","type":"post","link":"https:\/\/www.develop-note.com\/blog\/2019\/09\/12\/2020ironman-svelte-html-binding\/","title":{"rendered":"\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY11-html \u5c6c\u6027\u7d81\u5b9a"},"content":{"rendered":"<h1>html\u7684\u5c6c\u6027\u7d81\u5b9a<\/h1>\n<p>\u6628\u5929\u5206\u4eab\u4e86\u5982\u4f55\u7d81\u5b9a html \u7684\u4e8b\u4ef6\uff0c\u4eca\u5929\u8981\u8ac7\u8ac7\u5982\u4f55\u7d81\u5b9a html \u5c6c\u6027\uff0c\u4e5f\u5c31\u662f\u5982\u4f55\u66f4\u65b0 input \u7684 value \u6642 object \u7684\u503c\u4e5f\u6703\u4e00\u4f75\u66f4\u65b0\u3002<\/p>\n<p><!--more--><\/p>\n<h1>\u5982\u4f55\u5c6c\u6027\u7d81\u5b9a<\/h1>\n<p>\u6628\u5929\u5206\u4eab\u4e8b\u4ef6\u7d81\u5b9a\u7684\u95dc\u9375\u5b57\u662f <code>on<\/code> \uff0c\u4eca\u5929\u5206\u4eab\u7684\u5c6c\u6027\u7d81\u5b9a\u7684\u95dc\u9375\u5b57\u662f <code>binding<\/code> \u8a9e\u6cd5\u8aaa\u660e\u5982\u4e0b\u3002<\/p>\n<pre><code class=\"language-xml\">bind:property={variable}<\/code><\/pre>\n<p>\u4e0a\u9762\u6240\u5217\u662f\u7d81\u5b9a\u7684\u8a9e\u6cd5\u793a\u610f\uff0c\u57fa\u672c\u4e0a\u5927\u90e8\u5206 input \u9700\u8981\u7d81\u5b9a\u7684\u662f <code>value<\/code> \u4e0b\u9762\u5c31\u5be6\u969b\u900f\u904e\u7bc4\u4f8b\u4f86\u770b\u770b\u5982\u4f55\u7d81\u5b9a\u3002<\/p>\n<pre><code class=\"language-html\">&lt;input bind:value={name}&gt;\n&lt;textarea bind:value={text}&gt;&lt;\/textarea&gt;\n\n&lt;input type=&quot;checkbox&quot; bind:checked={yes}&gt;<\/code><\/pre>\n<p>\u518d\u4f86\u5c31\u662f\u5982\u540c\u4e4b\u524d\u5143\u4ef6\u5c6c\u6027\u7684\u8ce6\u503c\u4e00\u822c\uff0c\u82e5\u662f\u7d81\u5b9a\u7684\u5c6c\u6027\u540d\u7a31\u8207\u8b8a\u6578\u540c\u540d\u5c31\u53ef\u4ee5\u7528\u7e2e\u5beb\uff0c\u7bc4\u4f8b\u5982\u4e0b\u6240\u793a\uff0c\u4e0b\u5217\u5169\u7a2e\u5beb\u6cd5\u662f\u76f8\u7b49\u7684\u3002<\/p>\n<pre><code class=\"language-html\">&lt;!-- These are equivalent --&gt;\n&lt;input bind:value={value}&gt;\n&lt;input bind:value&gt;<\/code><\/pre>\n<p>\u6700\u5f8c\u5982\u679c\u77e5\u9053\u8981\u63a5\u6536\u7684\u5c6c\u6027\u7684\u578b\u5225\u7684\u8a71\u53ef\u4ee5\u52a0\u4e0a <code>type<\/code> \u5982\u6b64 svelte \u6703\u5c07\u63a5\u53d7\u7684\u5c6c\u6027\u8f49\u578b\u6210\u6307\u5b9a\u578b\u5225\u518d\u8ce6\u4e88\u5230\u8b8a\u6578\uff0c\u7bc4\u4f8b\u5982\u4e0b\u6240\u793a\u3002<\/p>\n<pre><code class=\"language-html\">&lt;input type=&quot;number&quot; bind:value={num}&gt;\n&lt;input type=&quot;range&quot; bind:value={num}&gt;<\/code><\/pre>\n<h1>\u5c0f\u7d50<\/h1>\n<p>\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u7684\u662f\u5982\u4f55\u5c07\u8b8a\u6578\u7d81\u5b9a\u5230html\u5c6c\u6027\u4e0a\uff0c\u76f8\u4fe1\u5927\u5bb6\u90fd\u6703\u89ba\u5f97\u5947\u602a\u90a3 <code>select<\/code> \u5462\uff1f\u9019\u90e8\u5206\u56e0\u7232\u8207\u4e00\u822c html \u5c6c\u6027\u6709\u4e9b\u8a31\u5dee\u7570\uff0c\u6240\u4ee5\u660e\u5929\u518d\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u4e0b\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>html\u7684\u5c6c\u6027\u7d81\u5b9a \u6628\u5929\u5206\u4eab\u4e86\u5982\u4f55\u7d81\u5b9a html \u7684\u4e8b\u4ef6\uff0c\u4eca\u5929\u8981\u8ac7\u8ac7\u5982\u4f55\u7d81\u5b9a html \u5c6c\u6027\uff0c\u4e5f\u5c31\u662f\u5982\u4f55\u66f4\u65b0  &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.develop-note.com\/blog\/2019\/09\/12\/2020ironman-svelte-html-binding\/\" class=\"more-link\">\u95b1\u8b80\u5168\u6587<span class=\"screen-reader-text\">\u3008\u7b2c\u5341\u4e00\u5c46\u9435\u4eba\u8cfd \u524d\u7aef\u5de5\u7a0b\u5e2b\u7684\u53e6\u4e00\u500b\u9078\u64c7 svelte DAY11-html \u5c6c\u6027\u7d81\u5b9a\u3009<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[160,79],"class_list":["post-1270","post","type-post","status-publish","format-standard","hentry","category-develop","tag-2019ironman","tag-svelte"],"_links":{"self":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1270","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/comments?post=1270"}],"version-history":[{"count":6,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1270\/revisions"}],"predecessor-version":[{"id":3013,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/posts\/1270\/revisions\/3013"}],"wp:attachment":[{"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/media?parent=1270"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/categories?post=1270"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.develop-note.com\/blog\/wp-json\/wp\/v2\/tags?post=1270"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}