vue 表单数据自动收集

v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

v-model 并不关心表单控件初始化所生成的值。因为它会选择 Vue 实例数据来作为具体的值

<template>
  <!-- 表单数据自动收集 -->
  <div>
    <form action="/xx" @submit.prevent="handleSubmit">
      <span>用户名：</span>
      <input type="text" v-model="username" />
      <br />

      <span>密码：</span>
      <input type="password" v-model="password" />
      <br />

      <span>性别：</span>
      <input type="radio" value="女" id="female" v-model="sex" />
      <label for="female">女</label>
      <input type="radio" value="男" id="male" v-model="sex" />
      <label for="male">男</label>
      <br />

      <span>爱好：</span>
      <input type="checkbox" id="basket" value="basket" v-model="likes" />
      <label for="basket">篮球</label>
      <input type="checkbox" id="foot" value="foot" v-model="likes" />
      <label for="foot">足球</label>
      <input type="checkbox" id="pingpangball" value="pingpangball" v-model="likes" />
      <label for="pingpangball">乒乓球</label>
      <br />

      <span>城市：</span>
      <select v-model="cityId">
        <option value>未选择</option>
        <option :value="city.id" v-for="(city,index) in citys " :key="index">{{city.name}}</option>
        <br />
      </select>
      <br />

      <span>介绍</span>
      <textarea cols="30" rows="10" v-model="desc"></textarea>
      <br />

      <input type="submit" value="注册" />
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      sex: '女',
      likes: [],
      citys: [
        { id: 1, name: 'jack' },
        { id: 2, name: 'tom' },
        { id: 3, name: 'long' }
      ],
      cityId: '',
      desc: ''
    };
  },
  methods: {
    handleSubmit() {
      console.log(
        this.username,
        this.password,
        this.sex,
        this.likes,
        this.cityId,
        this.desc
      );
    }
  }
};
</script>
<style lang="less">
</style>