vue.js form表单提交

form表单提交是前端经常要用到的，vue.js的form提交只是比普通的多加几个东西 其他都是大同小异的 上代码吧！

主要就是v-model的用法啦 

<form action=""  method="post" enctype="multipart/form-data">
  <div class="add-to">
    <div class="address">
      <p class="address-p">地址</p>
      <select class="address-contry address-s" v-model="formObj.contry">
        <option :value="item.val" v-for="(item,index) in contry" :key="index">{{item.text}}</option>
      </select>
      <select class="address-province address-s" v-model="formObj.province">
        <option :value="item.val" v-for="(item,index) in province" :key="index">{{item.text}}</option>
      </select>
      <select class="address-city address-s" v-model="formObj.city">
        <option :value="item.val" v-for="(item,index) in city" :key="index">{{item.text}}</option>
      </select>
      <select class="address-area address-s" v-model="formObj.area">
        <option :value="item.val" v-for="(item,index) in area" :key="index">{{item.text}}</option>
      </select>
      <input type="text" placeholder="请输入详细地址" class="address-text address-s" v-model="formObj.detail"/>
    </div>
    <div class="address-phone">
      <p class="address-num">联系方式</p>
      <input type="text" placeholder="请输入电话号码" class="address-text address-s" v-model="formObj.phone"/>
    </div>
    <div class="address-div">
      <p class="address-detailed">详细地址：{{formObj.contry + formObj.province + formObj.city + formObj.area + formObj.detail + ' ' + formObj.phone}}</p>
    </div>
    <div class="number">
      <p class="address-num">数量</p>
      <input type="number" class="number-input" name="points" min="0" max="100" value="1" v-model="formObj.number"/>
    </div>
    <div class="shopping-cart">
      <button class="add-shopping-buy" @click="onSubmit($event)">购买</button>
    </div>
  </div>
</form>

export default {
　　data(){
　　　　return{
formObj:{
  contry:'',
  province:'',
  city:'',
  area:'',
  detail:'',
  phone:'',
  number:''
}
　　 　}
　　}
},
methods:{
onSubmit(event) {
  event.preventDefault();
  let formData = JSON.stringify(this.formObj);
  console.log(formData);
  this.$http.post('', formData).then(function (res) {
    if (res.status === 2000) {

    }
    else{

    }
  })
}
}

转载于:https://www.cnblogs.com/pinkzxd/p/10157310.html