Svelte 輸入框組綁定

2023-02-21 14:50 更新

如果你需要綁定更多值,則可以使用bind:group 將 value 屬性放在一起使用。 在bind:group中,同一組的單選框值時互斥的,同一組的復(fù)選框會形成一個數(shù)組。

添加bind:group 到每一個選擇框:

<input type=radio bind:group={scoops} value={1}>

在這種情況下,我們可以給復(fù)選框標簽添加一個 each 塊來簡化代碼。 首先添加一個menu變量到 <script>標簽中:

let menu = [
	'Cookies and cream',
	'Mint choc chip',
	'Raspberry ripple'
];

接下來繼續(xù)替換:

<h2>Flavours</h2>

{#each menu as flavour}
	<label>
		<input type=checkbox bind:group={flavours} value={flavour}>
		{flavour}
	</label>
{/each}

現(xiàn)在,我們可以輕易的拓展我們的“ice cream menu”。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號