Svelte中的反應性陳述

如何在Svelte中使用反應式語句

在Svelte中,您可以偵聽組件狀態的更改,並更新其他變量。

例如,如果您有一個count多變的:

<script>
let count = 0
</script>

然後您通過單擊按鈕對其進行更新:

<script>
let count = 0

const incrementCount = () => { count = count + 1 } </script>

{count} <button on:click={incrementCount}>+1</button>

您可以聽有關的更改count使用特殊語法$:它定義了一個新塊,當其中引用的任何變量發生更改時,Svelte都會重新運行。

這是一個例子:

<script>
let count = 0

const incrementCount = () => { count = count + 1 }

$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) </script>

{count} <button on:click={incrementCount}>+1</button>

我用了塊:

$: console.log(`${count}`)

您可以編寫其中一個以上的代碼:

<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>

您還可以添加一個塊來組合多個語句:

<script>
$: {
  console.log(`the count is ${count}`)
  console.log(`double the count is ${count * 2}`)
}
</script>

我在那裡使用了console.log()調用,但是您也可以更新其他變量:

<script>
let count = 0
let double = 0

$: { console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) double = count * 2 console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) } </script>

免費下載我的苗條手冊


更多精妙的教程: