<body>
<!-- 在vue页面中 ，标签的v-的属性叫做指令，用于实现一些特殊的功能 -->
<!-- v-model，双向绑定指令 -->
<div
id
=
"app"
>
<!-- 对于普通的input ，v-model可以直接绑定一个数据，vue会将input中数据的内容绑定到这个变量上。 -->
<input
type
=
"number"
v-model
=
"txt"
>
<p>
{{txt}}
</p>
<hr>
<!-- 对于单个checkbox，可以绑定一个布尔值， -->
<input
type
=
"checkbox"
v-model
=
"agree"
>
<label
for
=
""
>
同意用户协议
</label>
<p>
{{agree}}
</p>
<hr>
<label
for
=
""
>
html
</label>
<!-- 同一组的多个checkbox可以使用v-model绑定到同一个数组上，被选中的input的value会同步到数组内容中。 -->
<input
type
=
"checkbox"
value
=
"html"
v-model
=
"tec"
>
<label
for
=
""
>
css
</label>
<input
type
=
"checkbox"
value
=
"css"
v-model
=
"tec"
>
<label
for
=
""
>
js
</label>
<input
type
=
"checkbox"
value
=
"js"
v-model
=
"tec"
>
<p>
{{tec}}
</p>
<hr>
<!-- 对于同一组中的多个单选框，可以绑定到同一个数据上，绑定的是被选中的单选框的value值 -->
<label
for
=
""
>
男
</label>
<input
type
=
"radio"
value
=
"male"
name
=
"gender"
v-model
=
"sex"
>
<label
for
=
""
>
女
</label>
<input
type
=
"radio"
value
=
"female"
name
=
"gender"
v-model
=
"sex"
>
<p>
{{sex}}
</p>
<hr>
<!-- 颜色选择器 -->
<input
type
=
"color"
v-model
=
"color"
>
<p>
{{color}}
</p>
<hr>
<!-- 对于下拉列表，v-model可以绑定一个字符串，绑定的值是当前被选中的option的value值 -->
<select
v-model
=
"major"
>
<option>
html
</option>
<option>
css
</option>
<option>
js
</option>
</select>
<p>
{{major}}
</p>
</div>
<!-- 让元素内容可编辑 -->
<div
contenteditable
=
"true"
>
123
</div>
<script
src
=
"vue.js"
>
<
/script>
<script>
new
Vue
({
el:
"#app"
,
data:
{
txt:
""
,
agree:
true
,
tec:
[],
sex:
""
,
color:
null
,
major:
""
,
}
})
<
/script>
</body>
