Vue：（十五）收集表单数据

最新推荐文章于 2024-06-03 11:24:17 发布

置顶空谷有来人

最新推荐文章于 2024-06-03 11:24:17 发布

阅读量489

点赞数

分类专栏： Vue 前端文章标签：前端 javascript java Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_41377877/article/details/128579406

版权

前端同时被 2 个专栏收录

48 篇文章 0 订阅

订阅专栏

Vue

38 篇文章 2 订阅

订阅专栏

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>

没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值）

配置input的value属性：

v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值）

v-model的初始值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

lazy：失去焦点再收集数据

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

trim：输入首位空格过滤

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
  </head>
  <body>
    <div id="root">
      <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="account" /> <br /><br />
        密码：<input type="password" v-model="password" /><br /><br />
        年龄：<input type="number" v-model.number="age" /><br /><br />
        性别： 男<input type="radio" name="sex" v-model="sex" value="male" />
        女<input type="radio" name="sex" v-model="sex" value="female" />
        <br /><br />
        爱好： 运动<input type="checkbox" v-model="hobby" value="sport" />
        唱歌<input type="checkbox" v-model="hobby" value="sing" /> 跳舞<input
          type="checkbox"
          v-model="hobby"
          value="dance"
        />
        <br /><br />
        所属校区：
        <select v-model="city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="xian">西安</option>
        </select>
        <br /><br />
        其他信息：
        <textarea v-model.lazy="other"></textarea>
        <br /><br />
        <input type="checkbox" v-model="agree" />
        阅读并接受<a href="www.baidu.com">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
    <script type="text/javascript">
      new Vue({
        el: '#root',
        data: {
          account: '',
          password: '',
          age: 18,
          sex: 'male',
          hobby: [],
          city: '',
          other: '',
          agree: '',
        },
        methods: {
          demo() {
            console.log(JSON.stringify(this._data))
          },
        },
      })
    </script>
  </body>
</html>

我是空谷有来人，谢谢大家关注。