<template>
  <div>
    <button v-for="gender in genders" :key="gender" @click="selectGender(gender)" :class="{ active: selectedGender === gender }">
      {{ gender }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      genders: ['Male', 'Female', 'Other'],
      selectedGender: ''
    };
  },
  methods: {
    selectGender(gender) {
      this.selectedGender = gender;
    }
  }
};
</script>

<template>
  <form @submit="submitForm">
    <input type="text" v-model="name" placeholder="Name">
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      name: ''
    };
  },
  methods: {
    submitForm() {
      // 在这里可以访问this.name，将其提交到服务器或进行其他操作
      console.log(this.name);
    }
  }
};
</script>