iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 2
0
Modern Web

前端工程的另一個選擇 Svelte 系列 第 12

DAY12-下拉選單的設定

  • 分享至 

  • xImage
  •  

svelte設定下拉選單

昨天跟大家分享完html的input的屬性綁定,不過還有型態比較特別的select跟option今天繼續跟大家分享。

本文同步放置於此

select的格式

大家應該很熟悉html中select的格式,接下來要跟大家分享在svelte中select跟option要怎麼使用。

基本的select

介紹之前先請大家看一下下列式子。

<select bind:value={selected}>
	<option value={a}>a</option>
	<option value={b}>b</option>
	<option value={c}>c</option>
</select>

基本上跟html的撰寫方式沒有差別,相信看過前面幾篇的朋友都知道{}內的都是變數,這時就把seleted跟選擇的項目綁定再一起,選擇的項目可以用seleted呈現或是使用。

複選的select

在認識基本的select後如果要做一個可以複選的select只要在select上加上multiple關鍵字即可,結果如下式子。

<select multiple bind:value={fillings}>
	<option value="Rice">Rice</option>
	<option value="Beans">Beans</option>
	<option value="Cheese">Cheese</option>
	<option value="Guac (extra)">Guac (extra)</option>
</select>

最後上述例子如果當value與呈現的值相同時可以加以省略如下列式子所示。

<select multiple bind:value={fillings}>
	<option>Rice</option>
	<option>Beans</option>
	<option>Cheese</option>
	<option>Guac (extra)</option>
</select>

結合之前所學

如果再搭配之前所學,我們可以很快完成一個動態的下拉選單。

<script>
	let list=['kirai','joe','jay'];
	let selected='kirai';
</script>

<h1>Hello {selected}!</h1>
<select multiple bind:value={selected} >
{#each list as item}
<option>{item}</option>
{/each}
</select>

小結

今天跟大家分享一下如何在svelte呈現下拉選單,以及如何綁定變數,希望大家會喜歡。


上一篇
DAY11-html 屬性綁定
下一篇
DAY13-fetch和promise還有await抓抓資料
系列文
前端工程的另一個選擇 Svelte 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言