学习Vue(六)

代码写了一遍,感觉没明白是啥意思,先放着暂时不管了,明天就学组件了

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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model的基本用法</title>
<script src="../js/vue.js"></script>
</head>
<body>

<!--两个输入框,在打拼音的时候,就能看出差别-->
<div id="app">
<input type="text" v-model="message" placeholder="输入.....">
<p>输入的内容是:{{message}}</p>
</div>

<div id="app2">
<input type="text" @input="myInput" placeholder="输入.....">
<p>输入的内容是:{{message}}</p>
</div>

<hr>

<!--单选框 单选的时候不需要v-model 直接使用的v-bind 来绑定一个布尔值-->
<div id="app3">
<input type="radio" :checked="picked">
<label>单选按钮</label>
</div>
<!--如果实现互斥选择的结果,就需要v-model配合value来使用-->
<div id="app4">
<input type="radio" v-model="picked" value="html" id="html">
<label for="html">HTML</label>

<input type="radio" v-model="picked" value="js" id="js">
<label for="js">js</label>

<input type="radio" v-model="picked" value="css" id="css">
<label for="css">css</label>

<p>选择的项是:{{picked}}</p>
</div>

<hr>

<!--单选框 单选的时候不需要v-model 直接使用的v-bind 来绑定一个布尔值-->
<div id="app5">
<input type="checkbox" v-model="checked" id="checked">
<label for="checked">选择的状态:{{checked}}</label>
</div>
<!--如果实现互斥选择的结果,就需要v-model配合value来使用-->
<div id="app6">
<input type="checkbox" v-model="checked" value="html" id="html2">
<label for="html2">HTML</label>

<input type="checkbox" v-model="checked" value="js" id="js2">
<label for="js2">js</label>

<input type="checkbox" v-model="checked" value="css" id="css2">
<label for="css2">css</label>

<p>选择的项是:{{checked}}</p>
</div>

<!--选择列表 单选-->
<div id="app7">
<select v-model="selected">
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择是:{{selected}}</p>
</div>

<!--选择列表 多选-->
<div id="app8">
<select v-model="selected" multiple>
<option>html</option>
<option value="js">JavaScript</option>
<option>css</option>
</select>
<p>选择是:{{selected}}</p>
</div>

<!--绑定值-->
<div id="app9">
<input type="radio" v-model="picked" :value="value"/>
<label>单选按钮 选中的时候false=123</label>
<p>{{picked}}</p>
<p>{{value}}</p>
</div>

<script>
var app = new Vue({
el:"#app",
data:{
message:""
}
});

var app2 = new Vue({
el:"#app2",
data:{
message:""
},
methods:{
myInput:function (e) {
this.message = e.target.value;
}
}
});

var app3 = new Vue({
el:"#app3",
data:{
picked:false
}
});

var app4 = new Vue({
el:"#app4",
data:{
picked:"js"
}
});

var app5 = new Vue({
el:"#app5",
data:{
checked:false
}
});

var app6 = new Vue({
el:"#app6",
data:{
checked:['html','css'] //这个是input 标签里的value值
}
});

var app7 = new Vue({
el:"#app7",
data:{
selected:"html"
}
});

var app8 = new Vue({
el:"#app8",
data:{
selected:["html","js"]
}
});

var app9 = new Vue({
el:"#app9",
data:{
picked:false,
value:123
}
});
</script>


</body>
</html>