13收集表单数据

最新推荐文章于 2024-04-02 17:53:45 发布

qq_26326471

最新推荐文章于 2024-04-02 17:53:45 发布

阅读量47

点赞数

分类专栏：学习文章标签： servlet ajax javascript

本文链接：https://blog.csdn.net/qq_26326471/article/details/127481803

版权

学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

<template>
    <div>
      <h1>收集表单数据</h1>
    </div>
    <div id="root">
      <!-- action 属性用于表单提交的地址,目前使用ajax把数据发给后端 页面无刷新获取数据 -->
      <form action="" @submit.prevent="demo">
        <label for="demo">账号：
        <input type="text" id="demo" v-model.trim="userInfo.account">
        </label><br/><br/>
        <label for="demo1">密码：
        <input type="text" id="demo1" v-model="userInfo.parrword">
        </label><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 name="" id="" v-model="userInfo.city">
          <option value="">请选择地址</option>
          <option value="dalian">大连</option>
          <option value="dandong">丹东</option>
          <option value="kuandian">宽甸</option>
        </select><br/><br/>
        其他信息
        <textarea name="" id="" cols="30" rows="2" v-model.lazy="userInfo.other"></textarea><br/><br/>
        <input type="checkbox" v-model="userInfo.agree"> 阅读并接受<a href="http://www.baidu.com">《用户协议》</a><br/><br/>
        <button>提交</button>
      </form>
    </div>
   收集表单数据: <hr/>
        若: <input type="text"/>,则v-model收集的是value值,用户输入的就是value值<hr/>
        若: <input type="radio"/>则v-model收集的是value值,且要给标签配置value值<hr/>
        若：<input type="checkbox"/><hr/>
              1.没有配置input的value属性,那么收集的就是checked(勾选 or 为勾选, 是布尔值)<hr/>
              2.配置input的value属性:<hr/>
                    (1.)v-model的初始值是非数组,那么收集的就是checked(勾选 or 为勾选, 是布尔值)<hr/>
                    (2.)v-model的初始值是数组,那么收集的就是value组成的数组<hr/>
        备注: v-model的三个修饰符<hr/>
           lazy: 失去焦点再收集数据<hr/>
           number: 输入字符串转为有效的数字<hr/>
           trim: 输入首尾空格过滤<hr/>
  
  </template>
  <script>
  
  export default {
  //data的第二种写法:函数式
    data() { 
      return {
        userInfo: {
        account: '',
        parrword: '',
        age: '',
        sex: 'female',
        hobby: [],
        city: '',
        other: '',
        agree: '',
        }
      }
    },
    methods:{
      demo () {
        // console.log(JSON.stringify(this._data))
        console.log(JSON.stringify(this.userInfo))
      }
    },
    computed: {
      },
    watch: {
  
    }
    
  }
  </script>
  <style scoped>
  </style>