<script> let harga = 10000; $: diskon = harga * 0.1; // Otomatis hitung ulang saat `harga` berubah </script> <input type="number" bind:value={harga} /> <p>Diskon: {diskon}</p> Bedanya dengan Framework Lain? React/Vue: Butuh state management (Redux, Vuex) dan ... let pesan = "Tekan tombol!"; </script> <button on:click={() => pesan = "Tombol diklik!"}> Klik Saya </button> <p>{pesan}</p> Binding Data Binding memastikan sinkronisasi antara state dan UI. Svelte mendukung data binding dengan printah bind: . Untuk memperjelas,
perlu menulis banyak kode JavaScript.Salah satu fitur utama Alpine JS adalah kemampuannya untuk mengelola state langsung di HTML. Misalnya, Anda bisa menggunakan `x-data` untuk menentukan data awal sebuah elemen, dan `x-on` untuk menangani event seperti klik. Berikut contoh sederhana penggunaan ... x-text="message"></p></div>Dengan kode ini, teks di dalam elemen `<p>` akan berubah sesuai dengan input yang dimasukkan pengguna, membuat pengalaman pengguna menjadi lebih dinamis dan interaktif.Menerapkan State Management di Alpine JSAlpine JS adalah library JavaScript ringan


