互動

可以透過on:click去呼叫函數，這樣就可以在點選按鈕時，更新時間了。

<script>
	let today = new Date();
	**function update(){
		today = new Date();
	}**
</script>

<h1>現在時間</h1>
<p>{today}</p>
<button **on:click={update}**>更新</button>
<a href="/">首頁</a>

<style>
	p {
		color: purple;
		font-size: 2em;
	}
</style>

引用元件

在Svelte裡，可以利用元件切割並重複利用我們的程式。

/src/routes/test/product.svelte

    <ul>
    <li>iPad / 20000</li> 
    <li>iPhone X / 30000</li>
    </ul>

在/src/routess/test/+page.svelte中引用這個元件:

<script>
	import Product from './product.svelte';
</script>

**<Product />**
<a href="/">首頁</a>

<style>
	p {
		color: purple;
		font-size: 2em;
	}
</style>

可以傳參數(Props)到元件裡，例如，我們只要第一個產品:

/src/routess/test/+page.svelte

<script>
	import Product from './product.svelte';
</script>

**<Product id={0}/>
<Product id={1}/>**
<a href="/">首頁</a>

在元件中，利用export收到參數(Props)。Props是最簡單的傳遞方式，更複雜的運作可參考: Svelte State Management Guide。

/src/routes/test/product.svelte

<script>
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];
   **export let id = 0;**
</script>

<ul>
  
	<li>{**id**} / {products[**id**].desc} / {products[**id**].price}</li>

</ul>

條件判斷

在svelte裡，就跟php很像，可以加入條件判斷及迴圈，例如，要避免id超出陣列長度:

/src/routes/test/product.svelte

<script>
  let products= [
    {desc:"iPad", price:20000},
    {desc:"iPhone X", price:30000}
   ];
   export let id = 0;
</script>
**{#if id < products.length}**
<ul>
	<li>{id} / {products[id].desc} / {products[id].price}</li>
</ul>
**{/if}**