Skip to content

Instantly share code, notes, and snippets.

@JeffreyWay
Created June 16, 2020 13:28
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JeffreyWay/32e2dee5de8db27d0bcab453e52e65f0 to your computer and use it in GitHub Desktop.
Save JeffreyWay/32e2dee5de8db27d0bcab453e52e65f0 to your computer and use it in GitHub Desktop.
Alpine.js basic data binding example.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
<div x-data="{ first: 0, second: 0 }">
<input type="text" x-model.number="first"> + <input type="text" x-model.number="second"> = <output x-text="first + second"></output>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment