开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 8 天，点击查看活动详情

复选框的绑定

使用绑定的语法:

bind:绑定的属性

<input type=checkbox bind:checked={yes}>

输入框组绑定

输入框组是多个,但是我们依然可以使用bind关键字:如:

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

contentEditable的绑定

svelte统同样支持对contenteditable绑定的元素进行响应式数据的绑定,如:

<div
	contenteditable="true"
	bind:innerHTML={html}
></div>

但是只支持textContent和innerHTML的绑定,innerText就使用不了了.

元素尺寸绑定

块级元素都可以使用bind使用clientWidth、clientHeight、offsetWidth、offsetHeight进行绑定:

<div bind:clientWidth={w} bind:clientHeight={h}>
	<span style="font-size: {size}px">{text}</span>
</div>

这些绑定都是只读的,更改w和h的值不会有任何的变化.

this的绑定

this可以绑定到任何标签 (或组件) 并允许你获取对渲染标签的引用。例如，我们对<canvas> 标签进行绑定：

<canvas
	bind:this={canvas}
	width={32}
	height={32}
></canvas>

tips:注意，canvas的值 undefined 会一直存在直至组件挂载完毕，因此我们给 onMount添加一个生命周期函数来处理

组件绑定

正如可以绑定到DOM元素的属性一样，你也可以将组件的属性绑定。例如，我们能绑定位于<Keypad>组件内的 value 属性，就如同一个表单标签一般：

<Keypad bind:value={pin} on:submit={handleSubmit}/>

现在，当用户点击键盘数字时，pin 父组件的数据将会立刻获得更新。

选择框的多个绑定

选择框含有一个名为 multiple 的属性，在这种情况下，它将会被设置为数组而不是单值。选择框替换为<select multiple>：

<h2>Flavours</h2>

<select multiple bind:value={flavours}>
	{#each menu as flavour}
		<option value={flavour}>
			{flavour}
		</option>
	{/each}
</select>

媒体标签的绑定

<audio> 和 <video> 同样支持部分的属性绑定，接下来使用在几个属性上。

<video
	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
	on:mousemove={handleMousemove}
	on:mousedown={handleMousedown}
	bind:currentTime={time}
	bind:duration
	bind:paused
></video>

tips:bind:duration 相当于 bind:duration={duration}

针对 <audio> 和 <video> 的 6 个readonly 属性绑定：

duration (readonly) ：视频的总时长，以秒为单位。
buffered (readonly) ：数组{start, end} 的对象。
seekable (readonly) ：同上。
played (readonly) ：同上。
seeking (readonly) ：布尔值。
ended (readonly) ：布尔值。

svelte框的值的绑定