【Vue】学习笔记-表单 数据双向绑定表单控件(在form中)常见错误总结

数据双向绑定

通过v-mode指令在文本输入框中创建双向数据绑定

@submit.prevent=“postData” prevent防止出现闪现

表单控件(在form中)

0.标签 label

1.文本输入框 input type=text

2.密码输入框 input type=password

3.下拉菜单 select option

4.单选框 input type=“radio”(两个) v-model="formData.sex(同一个值)

5.复选框 input type=“checkbox”(两个) v-model="formData.sikll(同一个值)

6.提交按钮 button

代码：

<template> <div id="app"> <form @submit.prevent="postData"> <!-- ajax实现表单提交 --> <div> <label for="">用户名：</label> <input type="text" v-model="formData.username"> </div> <div> <label for="">密码：</label> <input type="password" v-model="formData.password"> </div> <div> <label for="">爱好</label> <select v-model="formData.hobby"> <option value="篮球">篮球</option> <option value="足球">足球</option> </select> </div> <div> <label for="">性别</label> <label for="">男 <input type="radio" value="男" v-model="formData.sex"> </label> <label for="">女 <input type="radio" value="女" v-model="formData.sex"> </label> </div> <div> <label for="">技能：</label> <label for="">前端</label> <input type="checkbox" value="前端" v-model="formData.sikll" > <label for="">java</label> <input type="checkbox" value="java" v-model="formData.sikll"> </div> <button>提交表单</button> </form> </div> </template> <script> export default { data() { return { formData:{ username:"", password:"", hobby:"", sex:"", sikll:[] //多选框 数组 } } }, methods:{ postData(){ console.log(this.formData); } } } </script>

显示效果如下图

常见错误总结

radio类型的单选输入框，双向数据绑定时，需要绑定同一个数值，变量名定义需要后面加空字符串 " "

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。