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，你无须超越谁，只要超越昨天的自己就好~

最后

以上就是高兴路灯为你收集整理的SveletJs学习——逻辑处理1. 条件判断2. 循环遍历3. Await的全部内容，希望文章能够帮你解决SveletJs学习——逻辑处理1. 条件判断2. 循环遍历3. Await所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。