首页 > 其他分享 >vue收集表单数据给后端交互

vue收集表单数据给后端交互

时间:2022-09-23 15:12:58浏览次数:62  
标签:vue console log number 表单 userInfo 交互

vue项目中需要收集表单数据给后端发送请求进行交互:

查看代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
<div id="app">
  <form action="" @submit.prevent="meDta">
<!--    加个v-model.trim去除前后空格,不是中间的-->
    账号:<input type="text" v-model.trim="userInfo.accont">{{userInfo.accont}}<br>
    密码:<input type="password" v-model="userInfo.password">{{userInfo.password}}<br><br>
    性别:
    男:<input type="radio" name="sex" v-model="userInfo.sex" value="man">
    女:<input type="radio" name="sex" v-model="userInfo.sex" value="women">--{{userInfo.sex}}<br>
    年龄:<input type="number" v-model.number="userInfo.age"><br>
    爱好:
    学习:<input type="checkbox" v-model="userInfo.hobby" value="study">
    吃饭:<input type="checkbox" v-model="userInfo.hobby" value="eat">
    旅游:<input type="checkbox" v-model="userInfo.hobby" value="marry">--{{userInfo.hobby}}<br><br>
    所属校园:
    <select name="" id="" v-model="userInfo.city">
      <option value="">请选择小区..</option>
      <option value="beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="tianjin">天津</option>
      <option value="wuhan">武汉</option>
    </select> {{userInfo.city}}<br><br>
    其他信息..
    <!--    //v-model双向绑定了,时时输出,加lazy的时候点击提交才获取或双向-->
    <textarea v-model.lazy="userInfo.other"></textarea>{{userInfo.other}}<br><br>
    <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="https://www.baidu.com">用户协议</a>
    <button>提交</button>
    {{userInfo.agree}}
  </form>
</div>
</body>
</html>
<script src="vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            userInfo: {
                accont: '',
                password: '',
                sex: "man",
                hobby: [],
                city: 'beijing',
                agree: '',
                other: '',
                age: 18 //为了避免后台识别不了字符串和数组格式 改成number类型
                // 表单里 type='text' 改成type='number'
                //但是默认18number,重新输入提交自动变字符串格式 表单里v-model.number='age'就可以
                //前面控制类型,v-model的number避免再次改类型
            }
        },
        methods: {
            meDta() {
                console.log('点击')
                console.log(this.userInfo)
                console.log(JSON.stringify(this.userInfo))  //拿到了全部表单数据
            }
        }
    })

</script>

标签:vue,console,log,number,表单,userInfo,交互
From: https://www.cnblogs.com/mahmud/p/16722803.html

相关文章