\u5728\u4e4b\u524d\u8ddf\u5927\u5bb6\u5206\u4eab\u4e86 svelte \u5728 html \u4e0a\u64cd\u4f5c\u7684\u8a9e\u6cd5\uff0c\u4e5f\u5206\u4eab\u4e86\u5982\u4f55\u5728 html \u4e0a\u6e32\u67d3\u8b8a\u6578\uff0c\u7136\u5f8c\u4e5f\u63d0\u5230\u66f4\u65b0\u756b\u9762\u7684\u898f\u5247\u53ca\u9650\u5236\uff0c\u4eca\u5929\u8981\u8ddf\u5927\u5bb6\u5206\u4eab\u5982\u4f55\u5373\u6642\u53cd\u61c9\u3002<\/p>\n
<\/p>\n
\u5728\u539f\u4f86\u7684javascript\u662f\u4f7f\u7528interval\u6216\u662ftimeout\u4f86\u4e0d\u65b7\u66f4\u65b0\uff0c\u4f46\u662f\u8b8a\u6578\u66f4\u65b0\u76f8\u5c0d\u6703\u9020\u6210\u6574\u500b\u756b\u9762\u91cd\u65b0\u6e32\u67d3\u3002<\/p>\n
\u7136\u800c\u5728svelte\u7684\u8b8a\u6578\u6703\u5075\u6e2c\u8ce6\u503c\u4f86\u9a45\u52d5\u6e32\u67d3\uff0c\u4e0d\u904e\u5176\u4ed6\u6c92\u6709\u8b8a\u66f4\u7684\u8b8a\u6578\u4e0d\u6703\u96a8\u8457\u8b8a\u66f4\uff0c\u53ef\u4ee5\u5148\u770b\u4ee5\u4e0b\u5f0f\u5b50\u3002<\/p>\n
<script>\n let count = 1;\n\n \/\/ the `$:` means 're-run whenever these values change'\n let doubled= count * 2;\n let quadrupled = doubled * 2;\n\n function handleClick() {\n count += 1;\n }\n<\/script>\n\n<button on:click={handleClick}>\n Count: {count}\n<\/button>\n\n<p>{count} * 2 = {doubled}<\/p>\n<p>{doubled} * 2 = {quadrupled}<\/p><\/code><\/pre>\n\u9019\u500b\u7d50\u679c\u662f\u4e0d\u7ba1\u600e\u9ebc\u6309\u6309\u9215\uff0cdoubled\u8ddfquadrupled\u90fd\u4e0d\u6703\u8b8a\u66f4\uff0c\u8981doubled\u8ddfquadrupled\u96a8\u8457count\u7684\u8b8a\u66f4\u800c\u8b8a\u66f4\u5c31\u8981\u770b\u9019\u63a5\u4e0b\u4f86\u8981\u5206\u4eab\u7684\u6771\u897f<\/p>\n
svelte\u7684$<\/h1>\n
\u5728\u9019\u88cf\u5206\u4eabsvelte\u7684 $ <\/code> \uff0c\u9019\u7b26\u865f\u5728svelte\u6709\u5169\u500b\u7528\u6cd5\uff0c\u4eca\u5929\u5148\u4ecb\u7d39\u5176\u4e2d\u4e00\u7a2e\uff0c\u5c31\u662f\u525b\u525b\u4e00\u76f4\u5728\u8b1b\u7684\u5373\u6642\u53cd\u61c9\u3002<\/p>\n\u5373\u6642\u53cd\u61c9$\u7684\u7528\u6cd5<\/h2>\n
\u5728svelte\u8981\u505a\u5230\u5373\u6642\u66f4\u65b0\u5f88\u5bb9\u6613\uff0c\u53ea\u8981\u5c07\u4e0a\u8ff0\u7684\u4f8b\u5b50\u6539\u6210\u4ee5\u4e0b\u7684\u5167\u5bb9\u5c31\u53ef\u4ee5\u9054\u5230\u5373\u6642\u66f4\u65b0\u7684\u6548\u679c\u3002<\/p>\n
<script>\n let count = 1;\n\n \/\/ the `$:` means 're-run whenever these values change'\n $: doubled = count * 2;\n $: quadrupled = doubled * 2;\n\n function handleClick() {\n count += 1;\n }\n<\/script>\n\n<button on:click={handleClick}>\n Count: {count}\n<\/button>\n\n<p>{count} * 2 = {doubled}<\/p>\n<p>{doubled} * 2 = {quadrupled}<\/p><\/code><\/pre>\n\u6240\u4ee5\u53ea\u662f\u7a0d\u7a0d\u4fee\u6539\u4e00\u500b\u5c0f\u5730\u65b9\uff0c svelte \u5c31\u80fd\u5920\u5373\u6642\u66f4\u65b0\uff0c\u800c\u4e14\u66f4\u65b0\u4e0d\u662f\u4e0d\u505c\u6b62\u7684\u66f4\u65b0\uff0c\u800c\u662f\u7576 count \u8b8a\u52d5\u6642\u624d\u6703\u9a45\u52d5 doubled \u8ddf quadrupled \u7684\u8a08\u7b97<\/p>\n
\u5c0f\u7d50<\/h1>\n
\u4eca\u5929\u5148\u8ddf\u5927\u5bb6\u5206\u4eab\u5373\u6642\u53cd\u61c9\u7684\u65b9\u6cd5\uff0c\u773c\u5c16\u7684\u8b80\u8005\u5011\u61c9\u8a72\u5df2\u7d93\u770b\u5230\u6c92\u770b\u904e\u7684\u6771\u897f\uff0c\u6c92\u932f\u660e\u5929\u518d\u544a\u8a34\u5927\u5bb6\u600e\u9ebc\u7d81\u5b9a\u4e8b\u4ef6\u8ddf\u9a45\u52d5\u65b9\u6cd5\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5373\u6642\u53cd\u61c9 \u5728\u4e4b\u524d\u8ddf\u5927\u5bb6\u5206\u4eab\u4e86 svelte \u5728 html \u4e0a\u64cd\u4f5c\u7684\u8a9e\u6cd5\uff0c\u4e5f\u5206\u4eab\u4e86\u5982\u4f55\u5728 html \u4e0a\u6e32\u67d3\u8b8a\u6578\uff0c … <\/p>\n