Svelte.js: Two way binding

What is Svelte?

Interested to know more about Svelte?

Show me some code!

let inputValue = '';
<input type="text" bind:value="{inputValue}"
<script>let selectValue = "Green";</script><select bind:value="{selectValue}"><option value="Red">Red</option><option value="Green">Green</option></select>
<script>let radioValue = "Male";</script>Select Gender: <br><label><input type="radio" name="gender" value="Male" bind:group="{radioValue}">Male</label>
<label><input type="radio" name="gender" value="Female" bind:group="{radioValue}">Female</label>
<script>let checkboxValue = [];</script><label><input type="checkbox" name="framework" value="Vue" bind:group="{checkboxValue}">Vue</label><label><input type="checkbox" name="framework" value="Svelte" bind:group="{checkboxValue}">Svelte</label><label><input type="checkbox" name="framework" value="React" bind:group="{checkboxValue}">React</label>
<script>let singleCheckbox = false;</script><label>Svelte is awesome. Do you agree?<input type="checkbox" bind:checked="{singleCheckbox}"></label>
// Parent Component
import Input from './Input.svelte';
let componentValue = "";</script><Input bind:prop="{componentValue}"/>//Child Component<script>export let prop;</script><input type="text" placeholder="Type Something" bind:value="{prop}">

Front End Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store