<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model</title>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
window.onload= () =>{new Vue({
el: '#group',
data: {
checked:false,
users:[],
selected:'',
msg:''
}
}) }
</script> </head>
<body> <div id="group" align="left">
<h4>简单的问卷表格</h4> <!--单选框-->
<div id="checkbox">
是否想要学习该门课程：<input type="checkbox" v-model="checked">{{checked}}
</div>
<!--多选框-->
请选择你需要的老师：<br/> <div id="multi checkbox">
<input type="checkbox" value="lucy" v-model="users"/>lucy<br/>
<input type="checkbox" value="cidy" v-model="users"/>cidy<br/>
<input type="checkbox" value="bob" v-model="users"/>bob<br/>
<br/>
选中的老师：{{users}}
</div>
<!--下拉列表-->
请选择你想学习的课程：<br/>
<div id="select">
<select v-model="selected">
<option disabled="disabled" value="">--请选择--</option>
<option>java</option>
<option>c++</option>
<option>c#</option>
<option>php</option>
<option>html</option> </select><br/>
<span>已选择：{{selected}}</span>
</div><br/>
<!--文本框-->
<p>请输入其它备注文本内容:</p>
<div id="textarea">
<textarea v-model="msg"></textarea> </div> </div> </body>
</html>
</html>