Vue之表单事件数据绑定详解
更新时间:2021年11月21日 16:07:49 作者:王同学要努力
这篇文章主要为大家介绍了Vue之表单事件的数据绑定,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助,希望能够给你带来帮助
<body> <div id="root"> <form action="" @submit.prevent="demo"> <label for="TW"> 姓名:</label> <input type="text" id="TW" v-model.trim="userInfo.account"><br><br> 密码: <input type="password" id="pa" v-model="userInfo.password"><br><br> 年龄: <input type="number" v-model.number="userInfo.age"> <br><br> 性别: <input type="radio" name="sex" value="male" v-model="userInfo.sex">男 <input type="radio" name="sex" v-model="userInfo.sex" value="female">女<br><br> 爱好: 所属校区: <select v-model="userInfo.city"> <option value="school">请选择校区</option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select> <br><br> <input type="checkbox" v-model="userInfo.hobby" value="study"> 学习 <input type="checkbox" v-model="userInfo.hobby" value="sing"> 唱歌 <input type="checkbox" v-model="userInfo.hobby" value="dance"> 跳舞 <input type="checkbox" v-model="userInfo.hobby" value="game"> 王者<br><br> 其他信息: <textarea name="" v-model.lazy="userInfo.other"></textarea><br><br> <input type="checkbox" v-model="userInfo.agree"> 阅读并接受 <a href="#">《用户协议》</a><button>提交</button> </form> </div> <script> Vue.config.productionTip = false; new Vue({ el: '#root', data: { userInfo: { account: '', password: '', age: '', sex: 'female', city: 'beijing', hobby: [], other: '', agree: '', } }, methods: { demo() { console.log(JSON.stringify(this.userInfo)); } } }) </script> </body>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注脚本之家的更多内容!
相关文章
适用于 Vue 的播放器组件Vue-Video-Player操作
这篇文章主要介绍了适用于 Vue 的播放器组件Vue-Video-Player操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11TypeScript基本类型 typeof 和keyof案例详解
这篇文章主要介绍了TypeScript基本类型 typeof 和keyof案例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-10-10element ui循环调用this.$alert 消息提示只显示最后一个
这篇文章主要介绍了element ui循环调用this.$alert 消息提示只显示最后一个,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10element-ui修改el-form-item样式的详细示例
在使用element-ui组件库的时候经常需要修改原有样式,下面这篇文章主要给大家介绍了关于element-ui修改el-form-item样式的详细示例,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论