javascript - 在 Svelte 中使用 {#each} 动态创建 div

Question

我正在尝试使用 Svelte 中的 {each} 动态创建 5 个带有 li 的 div。

下面的代码渲染 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)

Answer 1

另一种方法是使用老式数学来计算费率。

<script>
    let numberOfYears = 5;
    let price = 1;
    let rate = 1.04;
    $: calculate = year => price*Math.pow(rate,year);
</script>

<input type="number" bind:value={numberOfYears} >
<input type="number" bind:value={price} >
<input type="number" bind:value={rate} step=".01">

{#each { length: numberOfYears } as _, i}
    <div>
        <h2>Year {i}</h2>
        <p>{calculate(i)}</p>
    </div>
{/each}

这里的calculate函数是 react 性的，因此只要价格或费率发生变化，它就会生成一个新函数。您也可以直接将其写在括号中或使用 {@const} 进一步内联它:

{#each { length: numberOfYears } as _, i}
    {@const intrest = price*Math.pow(rate,i)}
    <div>
        <h2>Year {i}</h2>
        <!-- with @const -->
        <p>{intrest}</p>
        <!-- formula directly in the markup -->
        <p>{price*Math.pow(rate,i)}</p>
    </div>
{/each}

请注意，我的数学可能有点偏差，请确保使用正确的公式