- 【融职培训】Web前端学习 第7章 Vue基础教程8 提交表单
- 【融职培训】Web前端学习 第7章 Vue基础教程2 创建Vue
- 【融职培训】Web前端学习 第7章 Vue基础教程1 Vue概
- 【融职培训】Web前端学习 第7章 Vue基础教程11 vuex
- 【融职培训】Web前端学习 第7章 Vue基础教程12 elem
- 【融职培训】Web前端学习 第7章 Vue基础教程10 路由
- 【融职培训】Web前端学习 第5章 node基础教程8 Nunj
- 【融职培训】Web前端学习 第8章 egg基础教程5 restf
- 【融职培训】Web前端学习 第8章 egg基础教程7 Nunju
- 【融职培训】Web前端学习 第8章 egg基础教程6 cooki
一、双向数据绑定
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> 8new Vue({ 9 el:"#app",10 data:{11 message:"123"12 }13 })14</script>15</body>
二、提交表单
利用双向数据绑定完成表单提交的操作
三、更多表单控件
下拉菜单
单选框
复选框
四、课后练习
实现一个用户注册功能，点击注册按钮，在控制台输出所有注册用户的信息，信息具体内容如下：
用户名
密码
邮箱
性别
兴趣爱好：篮球、足球、羽毛球。
实现一个表格数据的添加与删除。
网友评论