第十一屆鐵人賽 前端工程師的另一個選擇 svelte DAY11-html 屬性綁定

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *