Web前端学习 第7章 Vue基础教程8 提交表单
原创
一、双向数据绑定
v-model指令可以实现数据的双向绑定，也就是说如果input标签添加v-model指令后，在页面上修改input内的文本，会直接改变v-model绑定的变量，示例代码如下所示：
1 <body>
2 <div id="app">
3 <h1>数据绑定：{{message}}</h1>
4 <input type="text" v-model="message">
5 </div>
6 <script src="../../script/vue.js"></script>
7 <script>
8 new Vue({
9 el:"#app",
10 data:{
11 message:"123"
12 }
13 })
14 </script>
15 </body>二、提交表单
利用双向数据绑定完成表单提交的操作
三、更多表单控件
- 下拉菜单
- 单选框
- 复选框
四、课后练习
- 实现一个用户注册功能，点击注册按钮，在控制台输出所有注册用户的信息，信息具体内容如下：
- 用户名
- 密码
- 邮箱
- 性别
- 兴趣爱好：篮球、足球、羽毛球。
- 实现一个表格数据的添加与删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录