标签：el arr Vue methods demo 基础 校区
收集表单数据
......
<body>
<div id="container">
<form action="" method="">
<!--v-model获取用户输入的值-->
账号: <input type="text" v-model="account"/> <br>
密码: <input type="password" v-model="pwd"/> <br>
<!--name值一样,才能实现单选效果,使用v-model收集value的值-->
性别: 男<input type="radio" name="sex" v-model="sex" value="male"> 女<input type="radio" name="sex" v-model="sex" value="female"/> <br>
<!--使用v-model收集value的值,注意,多选框的变量必须为arr,否则有问题-->
爱好: 篮球<input type="checkbox" v-model="hobby" value="basketball"/> 足球<input type="checkbox" v-model="hobby" value="football"/> 网球<input type="checkbox" v-model="hobby" value="tennis"/> <br>
<!--使用v-model收集value的值-->
所属校区: <select name="" v-model="city">
<option value="">请选择校区</option>
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
<option value="guangzhou">广州</option>
</select><br>
<!--和收集用户名/密码一样-->
其他信息: <textarea v-model="other"></textarea><br>
<!--区别于性别的单选框,不需要value;有勾选就是true,没有勾选就是false-->
<input type="checkbox" v-model="agree" /> 阅读并接受<a href="#"><用户协议></a><br>
<button type="button">提交</button>
</form>
</div>
<script type="text/javascript">
var vm = new Vue({
'el':'#container',
data:{ // 除了复选框是arr,其他都默认空字符串即可
account:'',
pwd:'',
sex:'',
hobby:[],
city:'',
other:'',
agree:''
},
methods:{
}
})
</script>
</body>
标签：el,
arr,
Vue,
methods,
demo,
基础,
校区
From： https://www.cnblogs.com/qinganning/p/16952508.html