【Vue】v-model收集表单数据

收集表单数据:

若: ,则v-model收集的事vlaue值,用户输入的就是value值.

 <label for="username">账号:label>
 <input type="text" id="username" v-model.trim="account" />

若: ,则v-model收集的是vlaue值,且要给标签配置value值.

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

若:

没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)配置input的value属性:
(1)v-model 的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)
(2)v-model 的初始值是数组,那么收集的就是value组成的数组

//初始值非数组
	hobby:'',
//初始值数组
	hobby: [], 

v-model的三个修饰符: v-model.lazy 失去焦点时才收集数据(常用于多行文本框)v-model.number 输入字符串转为有效的数字 (常与input框搭配使用)

<label for="age">年龄:label>
<input type="number" id="age" v-model.number="age" />

v-model.trim 过滤输入的首位空格(常用于账号名) 实例:

 
    
    <div id="app">
      
      <form @submit.prevent="getForm">
        <label for="username">账号:label>
        <input type="text" id="username" v-model.trim="account" /><br />
        <label for="password">密码:label>
        <input type="password" id="password" v-model="password" /><br />
        
        <label for="age">年龄:label>
        <input type="number" id="age" v-model.number="age" /><br />
        性别:<br />
        <label for="sex0">男label>
        <input type="radio" name="sex" id="sex0" v-model="sex" value="male" />
        <label for="sex1">女label>
        <input
          type="radio"
          name="sex"
          id="sex1"
          v-model="sex"
          value="female"/><br />
        爱好:<br />
        <label for="xuexi">学习label>
        <input type="checkbox" id="xuexi" v-model="hobby" value="study" />
        <label for="dyx">打游戏label>
        <input type="checkbox" id="dyx" v-model="hobby" value="game" />
        <label for="cf">吃饭label>
        <input type="checkbox" id="cf" v-model="hobby" value="eat" /><br />
        所属校区:
        <select v-model="city">
          <option value="">请选择校区option>
          <option value="bj">北京option>
          <option value="tj">天津option>
          <option value="sd">山东option>select><br />
        其他信息:
        <textarea
          name=""
          id=""
          cols="16"
          rows="2"
          v-model.lazy="other">textarea><br />
        <input type="checkbox" v-model="agree" />阅读并接受
        <a href="javascript:;">《用户协议》a>
        <br />
        <button>提交button>
      form>
    div>

<script src="./vue.js"></script>
    <script>
      Vue.config.productionTip = false;//取消vue生产模式提示
      let vm = new Vue({
        el: '#app',
        data: {
          account: '',
          password: '',
          age: '',
          sex: 'female',
          hobby: [], //初始值影响v-model收集数据,多组勾选框要指定value要用数组
          city: '',
          other: '',
          agree: '',
        },
        methods: {
          getForm() {
          //用JSON.stringify()转换为json格式,尽量不直接访问_data,此处测试所以无妨
            console.log(JSON.stringify(this._data)); 
          },
        },
      });
    </script>