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屬性有些許差異，所以明天再跟大家分享一下。