如何在Svelte中条件性禁用表单字段？

嘿，我懂你从Angular转过来的困惑，Svelte的属性绑定逻辑和Angular有差异，你之前的写法不生效，是因为Svelte不会把你拼接的字符串解析成HTML属性——它只会把那段字符串当成普通属性值处理，自然达不到禁用效果。

下面是几种正确的实现方式，按简洁度排序：

1. 直接绑定布尔值（最推荐） #

和Angular思路类似，但Svelte语法更简洁，直接给disabled属性绑定你的布尔变量：

<input disabled={booleanCondition} type="text">

如果你的变量名刚好就是disabled，还能用上简写语法：

<input {disabled} type="text">

Svelte会自动处理布尔属性逻辑：绑定值为true时，给元素添加disabled属性；为false时移除该属性，完全契合HTML原生布尔属性的行为。

2. 使用条件渲染块（备选方案） #

如果你更偏好显式的条件分支，也可以用Svelte的{#if}块分别渲染两种状态的输入框：

{#if booleanCondition}
  <input disabled type="text">
{:else}
  <input type="text">
{/if}

不过这种方式在输入框带有大量其他属性时会显得冗余，所以第一种绑定方式通常是更优选择。

内容的提问来源于stack exchange，提问作者Claudio Holanda