vue中绑定表单提交

最新推荐文章于 2024-12-06 18:03:26 发布

原创最新推荐文章于 2024-12-06 18:03:26 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

前端开发同时被 2 个专栏收录

9 篇文章

订阅专栏

vue框架

1 篇文章

订阅专栏

本文介绍了在Vue框架中如何使用v-model进行双向数据绑定，实现表单提交时自动收集数据，相较于jQuery操作DOM的方式更为简便。Vue使得数据与视图间的交互变得轻松，无需手动获取表单值，直接通过Vue实例的数据即可获取到表单参数。

1，比较

原来的jquery需要操作demo去获取表单中的值放在data中，然后通过ajax请求传给后台

vue框架中的数据，不再需要操作demo，通过v-model-------(双向数据绑定),自动收集数据

view：

<div id= "demo"> 
  <form >
    <!-- text输入框 -->
    <span>姓名</span>
    <input type="text" v-model= "msg">
    <br>
    <!-- 密码输入框 -->
    <span>密码</span>
    <input type="password" v-model= "paw">
    <br>
    <!-- 单选框 -->
    <span>性别</span>
    <input type="radio" value="男" v-model= "sex">
    男
    <input type="radio" value="女" v-model= "sex">
    女
    <br>
     <!-- 复选框 -->
    <span>兴趣</span>
    <input type="checkbox" value="foot" v-model= "likes">
    足球
    <input type="checkbox" value="basket" v-model= "likes">
    篮球
    <input type="checkbox" value="pingpang" v-model= "likes">
    乒乓球
    <br>
    <!-- 下拉列表 -->
    <select> v-model= "cityId">
      <option value="">请选择列表</option>
      <option :value="city.id" v-for="(city,index) in citys" :key= "city.id">{{city.name}}</option>
    </select>
    <br>
    <!-- 输入多行文本框 -->
    留言：
    <textarea rows="5" v-model= "info">

    </textarea>
    <input type="button" value="提交" @click= "submit">
    

  </form>
</div>

数据和vm:

 new Vue({
    el: '#demo',
    data: {
      msg: '王晨栋',
      paw: '1234567',
      sex: '男',
      likes: ['foot','pingpang'],
      citys: [{id:1,name:'一年级'},{id:2,name:'二年级'},{id:3,name:'三年级'}],
      cityId: '2',
      info: '这个是我的多行留言！'
    },
    methods : {
      submit (){
        console.log(this.msg+'-----'+this.paw+'-----'+this.sex+'-----'+this.likes+'-----'+this.cityId+'-----'+this.info);
      }
    }
   
  })

轻松简单获取到参数：