SvelteJs学习——逻辑处理

1. 条件判断

HTML没有表达逻辑的方式，比如条件和循环等，但是Svelte有，表达方式和uniapp有点相像

1.1 if

• 可以使用 {#if 条件}…{/if}

<script>
	let isLogin = false

	function changeState() {
		isLogin = !isLogin
	}
</script>

<main>
	{#if !isLogin}
	<div>
		登录
	</div>
	{/if}
	{#if isLogin}
	<div>
		退出
	</div>
	{/if}
	<button on:click={changeState}>切换状态</button>
</main>

1.2 if/else

• 可以使用{#if 条件}当前条件内容{:else}其他条件内容{/if}

<script>
	let isLogin = false

	function changeState() {
		isLogin = !isLogin
	}
</script>

<main>
	{#if !isLogin}
		<div>
			登录
		</div>
	{:else}
		<div>
			退出
		</div>
	{/if}
	<button on:click={changeState}>切换状态</button>
</main>

1.3 if/ else if/ else

• 用法 {#if 条件}条件内容{:else if 条件}条件内容{:else}条件内容{/if}

<script>
	let count = 1

	function addCount() {
		count ++
	}
</script>

<main>
	{#if count > 3 && count <= 5}
		<div>count 大于 3</div>
	{:else if count > 5}
		<div>count 大于 5</div>
	{:else}
		<div>count 小于等于 3</div>
	{/if}
	<button on:click={addCount}>{count}</button>
</main>

2. 循环遍历

• 使用语法： {#each students as student,index}循环内容{/each}

<script>
	let students = [
		{
			num: 1,
			name: 'zs',
			age: 12,
			hobby: '篮球'
		},
		{
			num: 2,
			name: 'ls',
			age: 11,
			hobby: '网球'
		},
		{
			num: 3,
			name: 'ww',
			age: 14,
			hobby: '羽毛球'
		},
	]
</script>

<main>
	{#each students as student {student.num}}  -> student.num为key值
	<li>第{idx}人——我的名字是{student.name}, 我今年{student.age}, 最喜欢的活动是{student.hobby}</li>
	{/each}
	---
	{#each students as {name, age, hobby},idx} // 可以将内容解构出来
	<li>第{idx}人——我的名字是{name}, 我今年{age}, 最喜欢的活动是{hobby}</li>
	{/each}
</main>

3. Await

很多Web应用程序都可能在某个时候需要处理异步数据的需求。使用可以在标签中使用await处理。

<script>
	let promise = getRandomNumber();

	async function getRandomNumber() {
		const res = await fetch(`tutorial/random-number`);
		const text = await res.text();

		if (res.ok) {
			return text;
		} else {
			throw new Error(text);
		}
	}

	function handleClick() {
		promise = getRandomNumber();
	}
</script>

<button on:click={handleClick}>
	generate random number
</button>

{#await promise}
	<p>...waiting</p>
{:then number}
	<p>The number is {number}</p>
{:catch error}
	<p style="color: red">{error.message}</p>
{/await}

如果你的知道你的 promise 返回错误，则可以忽略 catch 块。如果在请求完成之前不想程序执行任何操作，也可以忽略第一个块。

{#await promise then value}
	<p>the value is {value}</p>
{/await}

官方文档
如果有用，点个赞呗~

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~