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

Posted 2023-02-19

技术标签:

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

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

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

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

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

我该怎么做？

【问题讨论】：

【参考方案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 />

【讨论】：

以上是关于如何在 Svelte 中有条件地禁用字段？的主要内容，如果未能解决你的问题，请参考以下文章