-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path01-state.html
32 lines (28 loc) · 1.19 KB
/
01-state.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!doctype html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Easy Installation: https://alpinejs.dev/essentials/installation -->
<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>
<title>Alpine.js : Declare & React</title>
</head>
<body>
<!--
Any HTML element can become an Alpine Component.
State (JavaScript data that Alpine watches for changes) is at the core of everything you do in Alpine.
You can provide local data to a chunk of HTML, or make it globally available for use anywhere on a
page using x-data or Alpine.store() respectively.
-->
<div x-data = "{
// Contain reactive properties, functions, or expressions
hello : 'cfsummit',
open : true,
toggle(){
this.open = !this.open
}
}">
<div x-text="hello" x-show="open"></div>
<button x-on:click="toggle" x-text="!open ? 'Open' : 'Close'"></button>
</div>
</body>
</html>