文章目录

收集表单数据

我们前面在数据绑定的时候就知道可以用v-model的数据双向流动性完成对数据的收集。不过当时我们只是简单的对输入框进行了数据收集。在表单中还有很多其他类型的组件，我们怎么对他们进行数据收集呢？

我们通过一个案例来理解。我们先完成一个表单，并对表单中的信息进行收集：

Vue核心⑩(收集表单数据)_vue.js


代码如下：

<body>
    <!-- 准备好一个容器-->
    <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="#">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>

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

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

最后收集到的数据：

Vue核心⑩(收集表单数据)_前端_02

Vue核心⑩(收集表单数据)_数据_03

收集表单数据：
若：<input type=“text”/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type=“radio”/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type=“checkbox”/>

  • 没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）（我们在上面的案例中用户协议的那块用的就是这种）
  • 配置input的value属性:
    (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    (2)v-model的初始值是数组，那么收集的的就是value组成的数组(案例中的爱好信息收集用的就是这一种)

v-model的三个修饰符

trim

​​trim​​:输入首位的空格过滤

演示：

账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>

效果：

Vue核心⑩(收集表单数据)_前端_04


Vue核心⑩(收集表单数据)_前端_05

number

​​number​​：将输入的字符串转化为有效数字

演示：

年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>

效果：

Vue核心⑩(收集表单数据)_javascript_06


Vue核心⑩(收集表单数据)_javascript_07

如果不使用number那么上图中的age那一栏里面显示的是​​”18“​​，这也会造成后期将数据放入到数据库中的时候出现数据类型不匹配而报错的情况。

同时这个修饰符经常与​​type="number"​​搭配使用，两者的区别在于：

  • ​​number​​修饰符控制存入的时候类型是数字型
  • ​​type="number"​​控制的是用户输入的时候只能输入数字型

如果单独使用number修饰符，当用户输入的数据中有非数字类型的时候，number将会对出现非数字数据的地方以及之后的所有数据不进行转换(不管是不是数字类型)。
例如：

Vue核心⑩(收集表单数据)_vue.js_08


Vue核心⑩(收集表单数据)_前端_09

lazy

​​lazy​​:失去焦点再收集数据

演示：

<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>

Vue核心⑩(收集表单数据)_数据_10


此时并没有收集数据，当我们转换焦点时(例如鼠标点击空白处、按下tab键、点击其他按钮)，开始收集数据：

Vue核心⑩(收集表单数据)_前端_11