Vue获取表单数据的多种方式

<input type="text" v-model="name">

<form @submit="handleSubmit">
  <input type="text" v-model="name">
  <input type="email" v-model="email">
  <button type="submit">Submit</button>
</form>

new Vue({
  data: {
    name: '',
    email: '',
  },
  methods: {
    handleSubmit() {
      console.log(this.name, this.email);
    }
  }
});

<div v-for="(item, index) in formItems" :key="index">
  <input type="text" v-model="item.value">
</div>
<button @click="addFormItem">Add</button>

new Vue({
  data: {
    formItems: []
  },
  methods: {
    addFormItem() {
      this.formItems.push({ value: '' });
    },
    handleSubmit() {
      console.log(this.formItems);
    }
  }
});

<input type="text" v-model="name">
<button @click="handleInput">Get Value</button>

new Vue({
  data: {
    name: ''
  },
  methods: {
    handleInput() {
      console.log(this.name);
    }
  }
});

<input type="radio" id="male" value="male" v-model="gender">
<label for="male">Male</label>
<input type="radio" id="female" value="female" v-model="gender">
<label for="female">Female</label>
<button @click="handleRadio">Get Value</button>

new Vue({
  data: {
    gender: ''
  },
  methods: {
    handleRadio() {
      console.log(this.gender);
    }
  }
});

<input type="checkbox" id="apple" value="Apple" v-model="fruits">
<label for="apple">Apple</label>
<input type="checkbox" id="banana" value="Banana" v-model="fruits">
<label for="banana">Banana</label>
<button @click="handleCheckbox">Get Value</button>

new Vue({
  data: {
    fruits: []
  },
  methods: {
    handleCheckbox() {
      console.log(this.fruits);
    }
  }
});

<select v-model="selectedFruit">
  <option value="">Select a fruit</option>
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>
<button @click="handleSelect">Get Value</button>

new Vue({
  data: {
    selectedFruit: ''
  },
  methods: {
    handleSelect() {
      console.log(this.selectedFruit);
    }
  }
});

<textarea v-model="message"></textarea>
<button @click="handleTextarea">Get Value</button>

new Vue({
  data: {
    message: ''
  },
  methods: {
    handleTextarea() {
      console.log(this.message);
    }
  }
});