Vue学习笔记24--收集表单数据

Vue收集表单数据总结：

<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
<input type="checkbox"/>
- 没有配置input的value属性，那么收集的就是checked(勾选或未勾选，是bool值)
- 配置input的value属性
  - v-model的初始值是非数组，那么收集的就是chekcked(勾选或未勾选，是bool值)
  - v-model的初始值是数组，那么收集的就是value组成的数组

注：v-model的三个修饰符

lazy：失去焦点后再收集数据
trim：去掉输入信息的首位空格
number：限制输入框，只能输入数字

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>收集表单数据</title>
  <script type="text/javascript" src="../Js/vue.js"></script>
</head>
 
<body>
  <div id="root" style="margin-top: 20px;margin-left: 20px;">
    <!-- @submit.prevent 表示阻止默认提交 -->
    <form @submit.prevent="methodSubmit">
      <!-- 注：v-model,用于控制input的输入value -->
      <!-- v-model.trim 去掉前后空格 -->
      <!-- text -->
      <label for="txtnum">账号：</label>
      <input id="txtnum" type="text" v-model.trim="account"><br><br>
      <label for="txtpwd">密码：</label>
      <input id="txtpwd" type="password" v-model="password"><br><br>
      <!-- 限制只能输入数字 注：v-model.number 进行了类型转换，默认字符串 -->
      年龄：<input type="number" v-model.number="age"><br><br>
      <!-- radio -->
      性别：
      男<input name="chbsex" type="radio" value="male" v-model="sex">
      女<input name="chbsex" type="radio" value="female" v-model="sex"><br><br>
      <!-- checkbox -->
      爱好：
      跑步<input type="checkbox" v-model="hobby" value="study">
      踢球<input type="checkbox" v-model="hobby" value="playBall">
      游戏<input type="checkbox" v-model="hobby" value="playGame"><br><br>
      <!-- select -->
      所属校区：
      <select style="width: 160px;" v-model="city">
        <option value="">请选择小区</option>
        <option value="xian">西安</option>
        <option value="beijing">北京</option>
        <option value="chongqing">重庆</option>
      </select><br><br>
      <!-- textarea v-model.lazy表示失去焦点后才触发更新-->
      其他信息：<textarea v-model.lazy="otherInfo" name="" id="" cols="25" rows="10"></textarea><br><br>
      <input type="checkbox" v-model="chbAgree">阅读并接受<a href="">《用户协议》</a><br><br>
      <!-- <button @click="methodSubmit">提交</button> -->
      <button>提交</button>
    </form>
  </div>
</body>
 
</html>
<script type="text/javascript">
  //console.log(vm)
  Vue.config.productionTip = false
  const vm = new Vue({
    el: '#root',
    data: {
      account: '',
      password: '',
      age: 18,
      sex: 'male',
      hobby: ['study'],
      city: 'xian',
      otherInfo: '',
      chbAgree: true,
    },
 
    computed: {
      attInfo () {
        // return this.isHot ? '炎热' : '凉爽'
      }
    },
    methods: {
      methodSubmit () {
        // 输出data对应的json
        console.log('json==', JSON.stringify(this._data))
        alert('提交事件成功！')
      },
 
      methodTwo (event, str) {
        // alert('事件触发成功！' + str)
      },
    },
  })
</script>