【融职培训】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>

二、提交表单

利用双向数据绑定完成表单提交的操作

三、更多表单控件

  • 下拉菜单
  • 单选框
  • 复选框

四、课后练习

  1. 实现一个用户注册功能,点击注册按钮,在控制台输出所有注册用户的信息,信息具体内容如下:
    1. 用户名
    2. 密码
    3. 邮箱
    4. 性别
    5. 兴趣爱好:篮球、足球、羽毛球。
  1. 实现一个表格数据的添加与删除。

【融职教育】在工作中学习,在学习中工作

猜你喜欢

转载自blog.csdn.net/ITXDL123/article/details/106923715