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">，因为布尔玛拥有CSS类.checkbox[disabled]。

Answer 1

disabled || undefined似乎可以解决问题：

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

编辑：维护人员confirmed认为，将属性完全从元素中删除是一种正确的支持方法。 undefined或null应该可以工作。

在Svelte 3中如何具有条件属性？

1 个答案: