\u5728\u8aaa\u660e\u5b8csvelte\u7684\u52d5\u614b\u5f8c\uff0c\u4eca\u5929\u4f86\u5206\u4eab\u4e00\u4e0bhtml\u4e0a\u5e38\u6703\u7528\u5230\u7684class\u6a19\u7c64\u5728svelte\u4e0a\u7684\u61c9\u7528\u3002<\/p>\n
\u8b8a\u66f4class\u6a19\u7c64\u7684\u5167\u5bb9\u5176\u5be6\u5f88\u7c21\u55ae\uff0c\u4e0b\u9762\u6709\u500b\u4f8b\u5b50\u53ef\u4ee5\u7d66\u5927\u5bb6\u53c3\u8003\u3002<\/p>\n
<script>\n let current = 'foo';\n<\/script>\n\n<style>\n button {\n display: block;\n }\n\n .active {\n background-color: #ff3e00;\n color: white;\n }\n<\/style>\n\n<button\n class="{current === 'foo' ? 'active' : ''}"\n on:click="{() => current = 'foo'}"\n>foo<\/button>\n\n<button\n class="{current === 'bar' ? 'active' : ''}"\n on:click="{() => current = 'bar'}"\n>bar<\/button>\n\n<button\n class="{current === 'baz' ? 'active' : ''}"\n on:click="{() => current = 'baz'}"\n>baz<\/button><\/code><\/pre>\n\u4e0d\u904e\u4eca\u5929\u5206\u4eab\u7684\u9019\u4e00\u7bc7\u9019\u6a23\u5c31\u8b1b\u5b8c\u4e86\u55ce?\u7576\u7136\u6c92\u6709\u90a3\u9ebc\u5feb\uff0c\u5176\u5be6\u6709\u66f4\u7c21\u6f54\u66f4\u5bb9\u6613\u4e86\u89e3\u7684\u65b9\u5f0f\u4f86\u8655\u7406class\u6a19\u7c64\uff0c\u63a5\u4e0b\u4f86\u6b63\u5f0f\u7684\u958b\u59cb\u8aaa\u660e\u4e00\u4e0bsvelte\u7684class\u6a19\u7c64\u8655\u7406\u65b9\u5f0f\u3002<\/p>\n
svelte class tag<\/h2>\n
\u5176\u5be6\u53ef\u4ee5\u628aclass\u6a19\u7c64\u7684\u5167\u5bb9\u8996\u70ba\u4e00\u500b\u5c6c\u6027\uff0c\u900f\u904etrue\u6216false\u6c7a\u5b9aclass\u6a19\u7c64\u5167\u7684\u9019\u500b\u5c6c\u6027\u662f\u5426\u5b58\u5728\u65bcclass\u5167\uff0c\u4e0b\u9762\u5c31\u7531\u6539\u5beb\u4e4b\u524d\u7684\u4f8b\u5b50\u4f86\u8aaa\u660e\u5728svelte\u5982\u4f55\u66f4\u65b0class\u6a19\u7c64\u3002<\/p>\n
<script>\n let current = 'foo';\n<\/script>\n\n<style>\n button {\n display: block;\n }\n\n .active {\n background-color: #ff3e00;\n color: white;\n }\n<\/style>\n\n<button\n class:active="{current === 'foo'}"\n on:click="{() => current = 'foo'}"\n>foo<\/button>\n\n<button\n class:active="{current === 'bar'}"\n on:click="{() => current = 'bar'}"\n>bar<\/button>\n\n<button\n class:active="{current === 'baz'}"\n on:click="{() => current = 'baz'}"\n>baz<\/button><\/code><\/pre>\n\u662f\u4e0d\u662f\u9019\u6a23\u4fee\u6539\u5f8c\u6bd4\u8f03\u5bb9\u6613\u95b1\u8b80\u5462\uff0c\u4e0d\u53ea\u9019\u6a23\uff0c\u4e4b\u524d\u5c6c\u6027\u7d81\u5b9a\u6642\u7684\u7c21\u5316\u7684\u6982\u5ff5\u4e5f\u53ef\u4ee5\u5957\u7528\u5728class\u6a19\u7c64\u4e0a\u5594\uff0c\u5927\u5bb6\u53ef\u4ee5\u770b\u770b\u4e0b\u9762\u7684\u4f8b\u5b50\u3002<\/p>\n
<script>\n let big = false;\n<\/script>\n\n<style>\n .big {\n font-size: 4em;\n }\n<\/style>\n\n<label>\n <input type=checkbox bind:checked={big}>\n big\n<\/label>\n\n<div class:big>\n some {big ? 'big' : 'small'} text\n<\/div><\/code><\/pre>\n\u7c21\u55ae\u8aaa\u660e\u4e00\u4e0b\u5c31\u662f\u7576\u8b8a\u6578\u540d\u7a31\u8207class\u6a19\u7c64\u7684\u5167\u5bb9\u540c\u540d\u6642\u5c31\u53ef\u4ee5\u7701\u7565\u8ce6\u503c\u7684\u90e8\u5206\u4e86\u3002<\/p>\n
\u5c0f\u7d50<\/h2>\n
\u4eca\u5929\u8ddf\u5927\u5bb6\u5206\u4eab\u4e00\u500b\u7c21\u55ae\u53c8\u5e38\u7528\u5230\u7684\u90e8\u5206\u5c31\u662fclass\u6a19\u7c64\u5728svelte\u4e0a\u7684\u8655\u7406\uff0c\u4e86\u89e3\u9019\u500b\u5f8c\u5c0d\u65bcsvelte\u958b\u767c\u4e0a\u53c8\u66f4\u5bb9\u6613\u4e00\u4e9b\u4e86<\/p>\n","protected":false},"excerpt":{"rendered":"
svelte class tag \u5728\u8aaa\u660e\u5b8csvelte\u7684\u52d5\u614b\u5f8c\uff0c\u4eca\u5929\u4f86\u5206\u4eab\u4e00\u4e0bhtml\u4e0a\u5e38\u6703\u7528\u5230\u7684class\u6a19 … <\/p>\n