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