如何在 Svelte 中有条件地禁用字段？

Question

在 Angular 2+（例如）中，我可以使用此语法有条件地禁用字段：

<input [disabled]="booleanCondition" type="text">

在 Svelte 中，我正在尝试执行以下操作，但它不起作用：

<input {booleanCondition ? 'disabled=""' : ''} type="text">

我该怎么做？

Answer 1

<input disabled={booleanCondition}>

Answer 2

我会在接受的答案中添加一个可以传递外部（相对于组件）布尔值，如下所示：

<!-- Nested.svelte -->
<input disabled={ $$props.disabled }>

<!-- App.svelte -->
<Nested disabled={ booleanCondition }/>

概括方法：

<!-- Nested.svelte -->
<script>
const { type, name, required, disabled } = $$props
</script>
<input { type } { name } { required } { disabled }>

<!-- App.svelte -->
<Nested type="text" name="myName" required disabled={ booleanCondition }/>

Answer 3

<script>
  let disabled = true;
</script>

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

这是 shorthand 用于：

<script>
  let disabled = true;
</script>

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

之所以有效，是因为当属性名称和值匹配时 (name={name})，它们可以替换为 {name}。

您可以在 Svelte Docs

找到它

在按钮中同样有效：

<button {disabled}>Can't Click</button>

Answer 4

要使其在 SSR 和 CSR 中完全正常工作，请使用以下代码：

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

How to disable field conditionally in Svelte?