在Svelte 3中如何使用有条件的属性？

Question

有没有更简单的方法来编写以下复选框组件：

<script>
  export let disabled = false;
</script>

{#if disabled}
  <label class="checkbox" disabled>
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{:else}
  <label class="checkbox">
    <input type="checkbox" {disabled} />
    <slot></slot>
  </label>
{/if}

使用 <label disabled="false"> 是不可接受的，因为Bulma有一个CSS类.checkbox[disabled]。

- batisteo

---

找到了这篇文章，链接在这里，可能会有所帮助。 - Gangula

Answer 1

disabled || null (or disabled || undefined) 就可以达到效果：

<label class="checkbox" disabled={disabled || null}>
  <input type="checkbox" {disabled} />
  <slot></slot>
</label>

从文档中得知:

... 属性会被包含，除非它们的值为nullish（null或undefined）。

<input required={false} placeholder="This input field is not required">
<div title={null}>This div has no title attribute</div>

- rixo

---

在Svelte中，autofocus只有在未设置任何值时才起作用，即使是空字符串或true/false也不行。如何解决这个问题？它的原因是什么？ - lukaszpolowczyk

属性包括除非它们的值为nullish（null或undefined）。是一种非常有用的切换属性的方式。 - Gangula