Web前端学习 第7章 Vue基础教程8 提交表单

2020-06-23 17:05:00 浏览数 (1)

一、双向数据绑定

v-model指令可以实现数据的双向绑定，也就是说如果input标签添加v-model指令后，在页面上修改input内的文本，会直接改变v-model绑定的变量，示例代码如下所示：

代码语言：javascript复制
 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. 兴趣爱好：篮球、足球、羽毛球。
  2. 实现一个表格数据的添加与删除。
input model 表单 表格

0 人点赞