v-model用于数据的双向绑定
<body>
<form action="">
<div id="demo">
用户名（文本）： <input type="text" name="user" v-model="user"><br><br>
性别（单选）：
<input type="radio" name="sale" value="0" v-model="sex">男
<input type="radio" name="sale" value="1" v-model="sex">女<br><br>
技能（多选）：
<input type="checkbox" name="skill" value="1" v-model="skills"> Jave开发
<input type="checkbox" name="skill" value="2" v-model="skills"> Vue开发
<input type="checkbox" name="skill" value="3" v-model="skills"> PHP开发<br><br>
城市：（下拉框）
<select name="city" v-model="city"> //下拉框的v-model写在select标签内，获取的是option内的value值
<option :value="v.code" v-for="(v,index) in citys " :key="index">{{v.name}}</option>
</select><br><br>
说明：（多行文本）
<textarea name="desc" cols="30" rows="10" v-model="desc"></textarea><br><br>
<input type="submit" value="提交"><br><br>
</form>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: "#demo",
data: {
user: "",
sex: "",
skills: [], //多选框的属性值是数组
citys: [ //下拉框的属性值是数组
{code: ‘bj‘, name: ‘北京‘ },
{ code: ‘sh‘, name: ‘上海‘ },
{ code: ‘gz‘, name: ‘广州‘ },
{ code: ‘sz‘, name: ‘深圳‘ }
],
city: "",
desc: "" },
methods: { }
})
</script>
</body>
原文：https://www.cnblogs.com/zhaodz/p/11682026.html