首页 > 其他 > 详细

Svelte 中的列表渲染用法

时间:2021-09-09 20:46:26      阅读:38      评论:0      收藏:0      [点我收藏+]

1 前言

Svelte 中条件渲染使用{#if ...} ... {/if} 声明,那列表渲染是不是类似:{#for ...} ... {/for}

2 正文

Svelte 中的列表渲染使用跟条件渲染类似的语法,不过关键字换成了 each,item 可以解构,这样看起来比较清晰。

<script>
  const list = [
    { name: "lilei", age: 21 },
    { name: "hanmeimei", age: 24 },
    { name: "lihua", age: 18 },
    { name: "zhangsan", age: 22 },
  ];
</script>

<ul>
  <!-- {#each list as item} -->
  {#each list as { name, age }}
    <li>{name} - {age}</li>
  {/each}
</ul>

 

3 总结

条件渲染用 {#if},列表渲染用 {#each}。

4 参考

Svelte 中的列表渲染用法

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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!