正文
下面是一个位于 each 块中的一组 input 输入框,可以通过 bind:value
实现数据的双向绑定。
<script>
let list = ["eat morning."];
const add = () => {
list = [...list, ""];
};
</script>
<header>
<button on:click={add}>Add new</button>
</header>
<ul>
{#each list as value}
<li>
<input type="text" bind:value placeholder="input sth." />
</li>
{/each}
</ul>
<style>
ul,
li {
margin: 0;
padding: 0;
width: auto;
}
li {
list-style: none;
padding: 15px 20px;
margin-bottom: 5px;
background-color: #f1f8fd;
}
input {
width: 100%;
}
</style>
参考
https://www.sveltejs.cn/tutorial/each-block-bindings