标签：绑定 list li padding width each input Svelte

正文

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

标签：绑定,list,li,padding,width,each,input,Svelte
来源： https://www.cnblogs.com/ujiu/p/14867839.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。