html的屬性綁定

昨天分享了如何綁定 html 的事件，今天要談談如何綁定 html 屬性，也就是如何更新 input 的 value 時 object 的值也會一併更新。

如何屬性綁定

昨天分享事件綁定的關鍵字是 on ，今天分享的屬性綁定的關鍵字是 binding 語法說明如下。

bind:property={variable}

上面所列是綁定的語法示意，基本上大部分 input 需要綁定的是 value 下面就實際透過範例來看看如何綁定。

<input bind:value={name}>
<textarea bind:value={text}></textarea>

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

再來就是如同之前元件屬性的賦值一般，若是綁定的屬性名稱與變數同名就可以用縮寫，範例如下所示，下列兩種寫法是相等的。

<!-- These are equivalent -->
<input bind:value={value}>
<input bind:value>

最後如果知道要接收的屬性的型別的話可以加上 type 如此 svelte 會將接受的屬性轉型成指定型別再賦予到變數，範例如下所示。

<input type="number" bind:value={num}>
<input type="range" bind:value={num}>

小結

今天跟大家分享的是如何將變數綁定到html屬性上，相信大家都會覺得奇怪那 select 呢？這部分因爲與一般 html 屬性有些許差異，所以明天再跟大家分享一下。