vue中绑定表单提交

1，比较

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

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

view：

 
  

    
    姓名
    
    

    
    密码
    
    

    
    性别
    
    男
    
    女
    

     
    兴趣
    
    足球
    
    篮球
    
    乒乓球
    

    
     v-model= "cityId">
      请选择列表
      {{city.name}}
    
    

    
    留言：
    
    
    
    

  

 

数据和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);
      }
    }
   
  })

 

轻松简单获取到参数：