如何在Svelte 3中拥有条件属性?

2022-06-12 00:00:00 html svelte svelte-component svelte-3

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

<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]


解决方案

disabled || null(或disabled || undefined)会起作用:

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

来自docs:

.[A]包括属性,除非它们的值为nullish (nullundefined)。

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

相关文章