1. 效果 (08_表单输入绑定/test.html)
08_表单输入绑定. gif
2. 使用 v-model 对表单数据自动收集
1) text/textarea 2) checkbox 3) radio 4) select
3. 编码
<div id=”demo”>
<form @submit.prevent=”handleSubmit”> <span>用户名: </span> <input type=”text” v-model=”user.username”><br>
<span>密码: </span> <input type=”password” v-model=”user.pwd”><br>
<span>性别: </span> <input type=”radio” id=”female” value=”female” v-model=”user.sex”> <label for=”female”>女</label> <input type=”radio” id=”male” value=”male” v-model=”user.sex”> <label for=”male”>男</label><br>
<span>爱好: </span> <input type=”checkbox” id=”basket” value=”basketball” v-model=”user.likes”>
<label for=”basket”>篮球</label> <input type=”checkbox” id=”foot” value=”football” v-model=”user.likes”> <label for=”foot”>足球</label> <input type=”checkbox” id=”pingpang” value=”pingpang” v-model=”user.likes”> <label for=”pingpang”>乒乓</label><br>
<span>城市: </span> <select v-model=”user.cityId”> <option value=””>未选择</option> <option v-for=”city in allCitys” :value=”city.id”> {{ city.name }} </option> </select><br> <span>介绍: </span> <textarea v-model=”user.desc” rows=”10″></textarea><br><br>
<input type=”submit” value=”注册”> </form>
</div>
<script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> var vm = new Vue({ el: ‘#demo’, data: { user: { username: ”, pwd: ”, sex: ‘female’, likes: [], cityId: ”, desc: ”, }, allCitys: [{id: 1, name: ‘BJ’}, {id: 2, name: ‘SZ’},{id: 4, name: ‘SH’}], }, methods: { handleSubmit (event) { alert(JSON.stringify(this.user))
}
} }) </script>
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 前端培训Vue之事件处理
下一篇: Java培训Maven课程之第三个Maven工程
