iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
0

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


上一篇
DAY10-html 事件處理
下一篇
DAY12-下拉選單的設定
系列文
前端工程的另一個選擇 Svelte 30

1 則留言

0
alantsui
iT邦新手 5 級 ‧ 2019-09-13 17:26:58

有點不明白,為什麼你停在了Day 2

kirai iT邦新手 5 級‧ 2019-09-13 22:06:21 檢舉

因為我第二天時遲了五分鐘發布所以就沒辦法完賽了/images/emoticon/emoticon02.gif

我要留言

立即登入留言