如何在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 (
null
或undefined
)。<input required={false} placeholder="This input field is not required"> <div title={null}>This div has no title attribute</div>
相关文章