codecamp

Svelte 输入框组绑定

如果你需要绑定更多值,则可以使用bind:group 将 value 属性放在一起使用。 在bind:group中,同一组的单选框值时互斥的,同一组的复选框会形成一个数组。

添加bind:group 到每一个选择框:

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

在这种情况下,我们可以给复选框标签添加一个 each 块来简化代码。 首先添加一个menu变量到 <script>标签中:

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

接下来继续替换:

<h2>Flavours</h2>

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

现在,我们可以轻易的拓展我们的“ice cream menu”。


Svelte 复选框
Svelte 文本域绑定
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Svelte module context

Svelte 调试

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }