首页 > 其他 > 详细

在 Svelte each 块中使用双向数据绑定

时间:2021-09-10 00:19:08      阅读:8      评论:0      收藏:0      [点我收藏+]

正文

下面是一个位于 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

在 Svelte each 块中使用双向数据绑定

原文:https://www.cnblogs.com/aisowe/p/15245553.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!