<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>