我正在try 使用Svelte中的{each}动态创建一个5个div,其中包含一个li.
下面的代码呈现div和li,但只运行一次计算,因此在每个div/li上给出相同的结果:
let price;
let numberOfYears = 5;
function calculate() {
price = price * 1.04;
}
<form action="">
<label for="price">Price: </label>
<input type="number" bind:value={price} id="price" name="price" />
<button class="calculate" on:click={calculate}>Calculate</button>
{#each { length: numberOfYears } as _, i}
<div style="float: left; width: 19%; border: 1px solid #000000;">
<h2>Year 1</h2>
{calculate()}
<ul>
<li>{price}</li>
</ul>
</div>
{/each}
我想要的是5年的增量价格(价格*1.04)