前端之vue收集表单数据

最新推荐文章于 2023-04-23 16:58:33 发布

一只爱吃萝卜的小兔子

最新推荐文章于 2023-04-23 16:58:33 发布

阅读量325

点赞数

分类专栏： vue 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_46372074/article/details/124404508

版权

vue 专栏收录该内容

51 篇文章 3 订阅

订阅专栏

收集表单数据(测重v-model用法)

在这里插入图片描述

<body>
  <!-- 容器 -->
  <div id="root">
    <form @submit.prevent="submitUserMsg">
      <label for="userAccount">账号:</label>
      <input type="text" name="" id="userAccount" v-model.lazy.trim="userInfo.account">
      <br />
      <br />
      <label for="userPassword">密码:</label>
      <input type="text" name="" id="userPassword" autocomplete="off" v-model.lazy.trim="userInfo.password">
      <br />
      <br />
      <label for="sex">性别:</label>
      男<input type="radio" name="sex" v-model.lazy.trim="userInfo.sex" value="male">
      女<input type="radio" name="sex" v-model.lazy.trim="userInfo.sex" value="female">
      <br />
      <br />
      爱好:
      学习<input type="checkbox" value="learn" v-model="userInfo.hobby">
      打游戏<input type="checkbox" value="game" v-model="userInfo.hobby">
      吃饭<input type="checkbox" value="eat" v-model="userInfo.hobby">
      <br />
      <br />
      所属校区
      <select v-model="userInfo.city">
        <option value="">请选择校区</option>
        <option value="shanghai">上海</option>
        <option value="beijing">北京</option>
        <option value="henan">河南</option>
        <option value="guangdong">广东</option>
      </select>
      <br />
      <br />
      其他信息:<br />
      <textarea v-model.lazy="userInfo.other"></textarea>
      <br />
      <br />
      <input type="checkbox" v-model="userInfo.agree">阅读并接受<a
        href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=39&spm_id_from=pageDriver" target="_blank">《用户协议》</a>
      <br />
      <button type="submit">提交</button>
    </form>
  </div>

  <script>
    Vue.config.productionTip = false; // 阻止 Vue 在启动时生成的生产提示
    new Vue({
      el: '#root',
      data() {
        return {
          userInfo: {
            account: '',
            password: '',
            sex: '',
            hobby: [],
            city: '',
            other: '',
            agree: ''
          }
        }
      },
      methods: {
        submitUserMsg() {
          const myJson = JSON.stringify(this.userInfo)
          console.log(myJson)
        }
      }
    })
  </script>

在这里插入图片描述
点击提交后

一只爱吃萝卜的小兔子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端之vue收集表单数据

收集表单数据(测重v-model用法)<body>  <div id="root"> <form @submit.prevent="submitUserMsg"> <label for="userAccount">账号:</label> <input type="text" name="" id="userAccount" v-model.lazy.trim="us
复制链接

扫一扫