Vue17 手机表单数据

1）v-model.trim

　　trim修饰符是去掉前后空格

2）type="number" v-model.number

　　type="number"：只能输入数字

　　v-model.number：以数字格式接收数据，否则是字符串接收

3）单选type="radio"

　　多个选项input的name值相同，且必须有value值，因为v-model获取的是value值

4）多选框type="checkbox"

　　在data里面对应的绑定数据，初始值设置为数组时，获取到的就是value的数组（必须有value，否则获取的是checked的值）

　　在data里面对应的绑定数据，初始值设置为字符串时，获取到的就是checked的值

5）v-model.lazy

　　lazy修饰符，表示延迟获取数据，在焦点移开时才会获取数据到data

6）@submit.prevent="demo"

　　@submit：绑定点击事件

　　prevent修饰符表示阻止默认动作(submit默认会有一个跳转页面的动作，这里给它阻止不跳转)

<title>收集表单数据</title>
<script type="text/javascript" src="../js/vue.js"></script>

<div id="root">
  <form @submit.prevent="demo">
    账号：<input type="text" v-model.trim="userInfo.account"> <br /><br />
    密码：<input type="password" v-model="userInfo.password"> <br /><br />
    年龄：<input type="number" v-model.number="userInfo.age"> <br /><br />
    性别：
    男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br /><br />
    爱好：
    学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    <br /><br />
    所属校区
    <select v-model="userInfo.city">
      <option value="">请选择校区</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="shenzhen">深圳</option>
      <option value="wuhan">成都</option>
    </select>
    <br/><br/>
    其他信息：
    <textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
    <input type="checkbox" v-model="userInfo.agree">阅读并接受
    <a href="https://www.yuque.com/cessstudy">《用户协议》</a>
    <button>提交</button>
  </form>
</div>

<script type="text/javascript">
  Vue.config.productionTip = false

  new Vue({
    el: '#root',
    data: {
      userInfo: {
        account: '',
        password: '',
        age: 18,
        sex: 'female',
        hobby: [],
        city: 'beijing',
        other: '',
        agree: ''
      }
    },
    methods: {
      demo() {
        console.log(JSON.stringify(this.userInfo))
      }
    }
  })
</script>