码迷,mamicode.com
首页 > 其他好文 > 详细

vue_表单实例

时间:2017-02-05 15:13:06      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:event   提交   ext   prevent   model   this   user   style   field   

<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 = JSON.stringify(this.user); // 这里才是你的表单数据

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

   })
</script>

 

vue_表单实例

标签:event   提交   ext   prevent   model   this   user   style   field   

原文地址:http://www.cnblogs.com/liadmin/p/6367510.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!