svelte教程(4)逻辑
条件逻辑
有条件的渲染一些元素,使用 "if" 代码块:
<script> let user = { loggedIn: true }; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if user.loggedIn} <button on:click={toggle}> Log out </button> {/if}
使用else代码块
<script> let user = { loggedIn: false }; function toggle() { user.loggedIn = !user.loggedIn; } </script> {#if user.loggedIn} <button on:click={toggle}> Log out </button> {:else} <button on:click={toggle}> Log in </button> {/if}
多条件可以使用 else if:
<script> let x = 7; </script> {#if x > 10} <p>{x} is greater than 10</p> {:else if 5 > x} <p>{x} is less than 5</p> {:else} <p>{x} is between 5 and 10</p> {/if}
循环逻辑
each 可以遍历数组、类数组对象、以及可迭代对象 each [...iterable]。
<script> let list = [{ name: "aaa" }, { name: "bbb" }, { name: "ccc" }]; </script> {#each list as l} <p>This is {l.name}</p> {/each}
使用list为空时渲染else代码块里的内容。
<script> let list = []; </script> {#each list as l} <p>This is {l.name}</p> {:else} <p>The list is empty</p> {/each}
默认情况下,修改each块的值时,它将在块的末尾添加和删除项目,并更新所有已更改的值。那可能不是您想要的。看下面一个例子,你会发现删除掉的是最后一个元素,然而我们实际想要删除的是第一个。
// Thing.svelte <script> // `current` is updated whenever the prop value changes... export let current; // ...but `initial` is fixed upon initialisation const initial = current; </script> <p> <span style="background-color: {initial}">initial</span> <span style="background-color: {current}">current</span> </p> <style> span { display: inline-block; padding: 0.2em 0.5em; margin: 0 0.2em 0.2em 0; width: 4em; text-align: center; border-radius: 0.2em; color: white; } </style>
<script> import Thing from "../components/Thing"; let things = [ { id: 1, color: "#0d0887" }, { id: 2, color: "#6a00a8" }, { id: 3, color: "#b12a90" }, { id: 4, color: "#e16462" }, { id: 5, color: "#fca636" } ]; function handleClick() { things = things.slice(1); } </script> <button on:click={handleClick}> Remove first thing </button> {#each things as thing} <Thing current={thing.color}/> {/each}
为了能够删除掉指定的元素,我们需要给元素加上唯一标识key:
<script> import Thing from "../components/Thing"; let things = [ { id: 1, color: "#0d0887" }, { id: 2, color: "#6a00a8" }, { id: 3, color: "#b12a90" }, { id: 4, color: "#e16462" }, { id: 5, color: "#fca636" } ]; function handleClick() { things = things.slice(1); } </script> <button on:click={handleClick}> Remove first thing </button> {#each things as thing (thing.id)} <Thing current={thing.color}/> {/each}
有时我们还需要用到索引
// Thing.svelte <script> // `current` is updated whenever the prop value changes... export let current; export let index; // ...but `initial` is fixed upon initialisation const initial = current; </script> <p> <span style="background-color: {initial}">initial {index}</span> <span style="background-color: {current}">current {index}</span> </p> <style> span { display: inline-block; padding: 0.2em 0.5em; margin: 0 0.2em 0.2em 0; width: 4em; text-align: center; border-radius: 0.2em; color: white; } </style>
<script> import Thing from "../components/Thing"; let things = [ { id: 1, color: "#0d0887" }, { id: 2, color: "#6a00a8" }, { id: 3, color: "#b12a90" }, { id: 4, color: "#e16462" }, { id: 5, color: "#fca636" } ]; function handleClick() { things = things.slice(1); } </script> <button on:click={handleClick}> Remove first thing </button> {#each things as thing, i (thing.id)} <Thing current={thing.color} index={i}/> {/each}
异步数据
svelte还可以处理异步数据。
<script> let num = 0; let promise = getNumber(); function sleep(duration) { return new Promise(function(resolve, reject) { setTimeout(resolve, duration); }); } async function getNumber() { await sleep(3000) if (num < 10) { return num; } else { throw new Error(`The ${num} is too big`); } } function handleClick() { num += 1; promise = getNumber(); } </script> <button on:click={handleClick}>btn</button> {#await promise} <p>...waiting</p> {:then value} <p>The number is {value}</p> {:catch error} <p style="color: red">{error}</p> {/await}
如果在promise resolve调用之前不希望现实任何数据:
{#await promise then value} <p>The number is {value}</p> {:catch error} <p style="color: red">{error}</p> {/await}
如果确定不会执行reject,可以省略catch:
{#await promise then value} <p>The number is {value}</p> {/await}
本教程的所有代码均上传到github有需要的同学可以参考 https://github.com/sullay/svelte-learn。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
svelte教程(3)props
在任何实际应用程序中,您都需要将数据从一个组件传递到其子组件。为此,我们需要声明properties,通常将其缩写为'props'。注意:Svelte中,我们使用export关键字来实现。export的工作原理与JavaScript中不同。 // Nested.svelte <script> export let answer; </script> <p>The answer is {answer}</p> // index.svelte <script> import Nested from '../components/Nested'; </script> <Nested answer={42}/> 指定props默认值,例如: // Nested.svelte <script> export let answer='a mystery'; </script> <p>The answer is {answer}</p> // index.svelte ...
- 下一篇
那些年,我们见过的 Java 服务端“问题”
导读 明代著名的心学集大成者王阳明先生在《传习录》中有云: 道无精粗,人之所见有精粗。如这一间房,人初进来,只见一个大规模如此。处久,便柱壁之类,一一看得明白。再久,如柱上有些文藻,细细都看出来。然只是一间房。 是的,知识理论哪有什么精粗之分,只是人的认识程度不同而已。笔者在初创公司摸爬滚打数年,接触了各式各样的Java服务端架构,见得多了自然也就认识深了,就能分辨出各种方案的优劣了。这里,笔者总结了一些初创公司存在的Java服务端问题,并尝试性地给出了一些不成熟的解决方案。 1.系统不是分布式 随着互联网的发展,计算机系统早就从单机独立工作过渡到多机器协同工作。计算机以集群的方式存在,按照分布式理论构建出庞大复杂的应用服务,早已深入人心并得到广泛地应用。但是,仍然有不少创业公司的软件系统停留在"单机版"。 1.1.单机版系统抢单案例 这里,用
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- Docker安装Oracle12C,快速搭建Oracle学习环境
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS关闭SELinux安全模块
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- CentOS8安装Docker,最新的服务器搭配容器使用
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- CentOS7设置SWAP分区,小内存服务器的救世主