جمل رد الفعل في 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>

تحميل مجانيكتيب Svelte


المزيد من البرامج التعليمية svelte: