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

【问题标题】：How to disable field conditionally in Svelte?如何在 Svelte 中有条件地禁用字段？
【发布时间】：2018-10-25 10:30:23
【问题描述】：

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

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

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

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

我该怎么做？

【问题讨论】：

标签： html svelte

【解决方案1】：

Like this:

<input disabled={booleanCondition}>

【讨论】：

【解决方案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 }/>

【讨论】：