-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy path04-model.html
105 lines (93 loc) · 3.07 KB
/
04-model.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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!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>
<!--
Two-way data binding via model and reactive properties
https://alpinejs.dev/directives/model
-->
<!-- Basic Binding -->
<div x-data="{
message : '',
toUpper(){
this.message = this.message.toUpperCase();
}
}">
<input type="text" x-model="message">
<span x-text="message"></span>
<button @click="message=''">Clear</button>
<button @click="toUpper">To Upper</button>
</div>
<hr class="my-5">
<!-- Text area -->
<div x-data="{
markdown : '',
converted : '',
preview(){
this.converted = window.marked.parse( this.markdown )
}
}">
<div>
<textarea cols="50" rows="5" x-model="markdown"></textarea>
</div>
<button @click="preview">Preview</button>
<h2 x-show="converted">HTML</h2>
<div
class="border border-1 bg-light p-2 mt-2"
x-show="converted"
x-html="converted"
></div>
<h2 x-show="converted">Text</h2>
<div
class="border border-1 bg-light p-2 mt-2"
x-show="converted"
x-text="converted"
></div>
</div>
<hr class="my-5">
<!-- Single Checkbox -->
<div x-data="{ agreed: false }">
<input type="checkbox" id="checkbox" x-model="agreed">
<label for="checkbox" x-text="agreed"></label>
<div x-show="agreed" class="alert alert-info">
You can proceed now
</div>
<div x-show="!agreed" class="alert alert-warning">
Do you agree to give me all your money?
</div>
</div>
<hr class="my-5">
<!-- Multiple Checkboxes -->
<div x-data="{ colors: [] }">
<div>
<input type="checkbox" x-model="colors" value="red"> Red
</div>
<div>
<input type="checkbox" x-model="colors" value="blue"> Blue
</div>
<div>
<input type="checkbox" x-model="colors" value="green"> Green
</div>
<div>
Colors: <label for="checkbox" x-text="colors"></label>
</div>
<button @click="colors = []">Clear</button>
</div>
<hr class="my-5">
<!-- Select -->
<div x-data="{ color: 'blue' }">
<select x-model="color">
<option value="">Please select a color</option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
Color: <span x-text="color"></span>
</div>
</body>
</html>