微信扫一扫打赏支持

VUE参考---收集表单数据

VUE参考---收集表单数据

一、总结

一句话总结：

vue绑定表单数据比较方便，绑定了表单数据之后，可以很方便的用ajax把数据发送到后端
<div id="demo">
  <form action="/xxx" @submit.prevent="handleSubmit">
    <span>用户名: </span>
    <input type="text" v-model="username"><br>

    <span>密码: </span>
    <input type="password" v-model="pwd"><br>

    <span>性别: </span>
    <input type="radio" id="female" value="女" v-model="sex">
    <label for="female">女</label>
    <input type="radio" id="male" value="男" v-model="sex">
    <label for="male">男</label><br>

    <span>爱好: </span>
    <input type="checkbox" id="basket" value="basket" v-model="likes">
    <label for="basket">篮球</label>
    <input type="checkbox" id="foot" value="foot" v-model="likes">
    <label for="foot">足球</label>
    <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
    <label for="pingpang">乒乓</label><br>

    <span>城市: </span>
    <select v-model="cityId">
      <option value="">未选择</option>
      <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
    </select><br>
    <span>介绍: </span>
    <textarea rows="10" v-model="info"></textarea><br><br>

    <input type="submit" value="注册">
  </form>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#demo',
    data: {
      username: '',
      pwd: '',
      sex: '男',
      likes: ['foot'],
      allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
      cityId: '2',
      info: ''
    },
    methods: {
      handleSubmit () {
        console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
        alert('提交注册的ajax请求')
      }
    }
  })
</script>

 

 

二、收集表单数据

博客对应课程的视频位置：

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <title>08_表单输入绑定</title>
 6 </head>
 7 <body>
 8 <!--
 9 1. 使用v-model(双向数据绑定)自动收集数据
10   text/textarea
11   checkbox
12   radio
13   select
14 -->
15 <div id="demo">
16   <form action="/xxx" @submit.prevent="handleSubmit">
17     <span>用户名: </span>
18     <input type="text" v-model="username"><br>
19 
20     <span>密码: </span>
21     <input type="password" v-model="pwd"><br>
22 
23     <span>性别: </span>
24     <input type="radio" id="female" value="女" v-model="sex">
25     <label for="female">女</label>
26     <input type="radio" id="male" value="男" v-model="sex">
27     <label for="male">男</label><br>
28 
29     <span>爱好: </span>
30     <input type="checkbox" id="basket" value="basket" v-model="likes">
31     <label for="basket">篮球</label>
32     <input type="checkbox" id="foot" value="foot" v-model="likes">
33     <label for="foot">足球</label>
34     <input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
35     <label for="pingpang">乒乓</label><br>
36 
37     <span>城市: </span>
38     <select v-model="cityId">
39       <option value="">未选择</option>
40       <option :value="city.id" v-for="(city, index) in allCitys" :key="city.id">{{city.name}}</option>
41     </select><br>
42     <span>介绍: </span>
43     <textarea rows="10" v-model="info"></textarea><br><br>
44 
45     <input type="submit" value="注册">
46   </form>
47 </div>
48 
49 <script type="text/javascript" src="../js/vue.js"></script>
50 <script type="text/javascript">
51   new Vue({
52     el: '#demo',
53     data: {
54       username: '',
55       pwd: '',
56       sex: '男',
57       likes: ['foot'],
58       allCitys: [{id: 1, name: 'BJ'}, {id: 2, name: 'SS'}, {id: 3, name: 'SZ'}],
59       cityId: '2',
60       info: ''
61     },
62     methods: {
63       handleSubmit () {
64         console.log(this.username, this.pwd, this.sex, this.likes, this.cityId, this.info)
65         alert('提交注册的ajax请求')
66       }
67     }
68   })
69 </script>
70 </body>
71 </html>

 

 

 

 

 
posted @ 2020-04-20 14:08  范仁义  阅读(169)  评论(0)    收藏  举报