-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path03-visibility.html
41 lines (33 loc) · 1.34 KB
/
03-visibility.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
33
34
35
36
37
38
39
40
41
<!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>
<div x-data="{ visible : true }">
<div x-show="visible" x-transition>Hola from Atlanta!</div>
<button x-on:click="visible=!visible">Toggle</button>
</div>
<hr class="my-5">
<div x-data="{ data : [ 1,2,3,4 ] }">
<div x-show="data.length">We found some data!</div>
</div>
<hr class="my-5">
<div x-data="{ data : 0 }">
<span x-text="data"></span>
<button x-on:click="data++">+</button>
<button x-on:click="data--">-</button>
<!--
x-if is ONLY applied to template tags, so we can track them
and remove them later. The main difference is that
it completely adds and removes the element instead of applying css magic
-->
<template x-if="data > 10">
<h1>WOW! This is a big Number!</h1>
</template>
</div>
</>
</html>