-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathdemo.html
68 lines (66 loc) · 2.08 KB
/
demo.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
<!DOCTYPE html>
<html>
<head>
<title>Vue TW city selector</title>
<style type="text/css">
.tw_city_selector {
}
.tw_city_selector .city {
}
.tw_city_selector .district {
}
.tw_city_selector .street {
}
.tw_city_selector .alert {
color: red;
border: solid red;
border-width: 1px;
}
</style>
<script type="text/javascript" src="https://unpkg.com/[email protected]"></script>
<script type="text/javascript" src="vue.tw-city-selector.js"></script>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function(){
new Vue({
el: '#my_address',
data: {
the_address: {
city: "新竹市",
district: "東區",
street: "博愛街111號"
},
is_readonly: false
},
mounted: function() {
this.on_address_changed();
},
methods: {
on_input_clicked: function() {
console.log("address clicked");
},
on_address_changed: function() {
document.getElementById("address_output").innerHTML =
this.the_address.city + this.the_address.district + this.the_address.street;
}
}
});
}, false);
</script>
</head>
<body>
<div id="my_address">
<span >地址：</span>
<div style="display: inline-block">
<tw-city-selector v-bind:addr="the_address"
v-bind:is_readonly="is_readonly"
v-on:input_clicked="on_input_clicked"
v-on:address_changed="on_address_changed">
</tw-city-selector>
</div>
</div>
<br/>
<div>
輸出：<span id="address_output"></span>
</div>
</body>
</html>