首页 > 代码库 > vue_表单实例

vue_表单实例

<div id="app">
    <form @submit.prevent="submit">
        <div class="field">
            姓名:<input type="text" v-model="user.name">
        </div>
        
        <div class="field">
            性別:
            <label>
                <input type="radio" value="男" v-model="user.gender"></label>
            <label>
                <input type="radio" value="女" v-model="user.gender"></label>
        </div>
        
        <input type="submit" value="提交">
    </form>
</div>
<script>

   new Vue({

       el: ‘#app‘,
       data: {
           user: {
               name: ‘‘,
               gender: ‘‘
           }
       },
       methods: {
           submit: function() {
               var formData = http://www.mamicode.com/JSON.stringify(this.user); // 这里才是你的表单数据

               this.$http.post(‘/path/to‘, formData).then((response) => {
                   // success callback
               }, (response) => {
                   // error callback
               });
           }
       }

   })
</script>

 

vue_表单实例