-
Notifications
You must be signed in to change notification settings - Fork 0
/
03.html
114 lines (113 loc) · 2.44 KB
/
03.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
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>task-03</title>
<script src="vue/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app-1">
<input type="text" v-on:keyup.f1="submit">
<input type="text" v-on:keyup.enter="submit">
<input type="text" @keyup.enter="submit">
</div>
<div id="app-2">
<input type="text" v-model="message" placeholder="'edit me">
<p>Message is:{{message}}</p>
</div>
<div id="app-3">
<input type="checkbox" id="chechbox" v-model="checked">
<label for="checkbox">{{checked}}</label>
</div>
<div id="app-4">
<input type="checkbox" value="Jack" v-model="checkedNames" id="jack">
<label for="jack">jack</label>
<input type="checkbox" value="John" v-model="checkedNames" id="john">
<label for="john">john</label>
<input type="checkbox" value="Mike" v-model="checkedNames" id="mike" >
<label for="mike">mike</label>
<br>
<span>checked names: {{ checkedNames }}</span>
</div>
<div id="app-5">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<input type="radio" id="three" value="Three" v-model="picked">
<label for="three">Three</label>
<br>
<span>picked:{{picked}}</span>
</div>
<div id="app-6">
<select v-model.lazy="selected">
<option v-for="option in options">{{option.text}}</option>
</select>
<span>selected:{{selected}}</span>
</div>
<div id="app-7">
<input id="bindvalue" type="checkbox" v-model.lazy="toggle" v-bind:true-value="a" v-bind:false-value='b'>
<label for="bindvalue">{{toggle}}</label>
<input type="text" v-model='age' id='Age'>
<label for="Age">{{age}}</label>
</div>
<script>
var app1=new Vue({
el:'#app-1',
methods:{
submit:function(){
alert('success')
}
}
})
Vue.config.keyCodes.f2=113
var app2=new Vue({
el:'#app-2',
data:{
message:''
}
})
var app3=new Vue({
el:'#app-3',
data:{
checked:false
}
})
var app4=new Vue({
el:'#app-4',
data:{
checkedNames:[]
}
})
var app05=new Vue({
el:'#app-5',
data:{
picked:null
}
})
var app06=new Vue({
el:'#app-6',
data:{
selected:'A',
options:[
{text:'One',value:'A'},
{text:'Two',value:'B'},
{text:'Tree',value:'C'}
]
}
})
var app07=new Vue({
el:'#app-7',
data:{
toggle:'false',
a:'true',
b:'false',
pick:'' ,
age:''
}
})
</script>
</body>
</html>