如何在 Vue.js 中的一个函数中操作多个输入选项数据

有时候，在 Vue.js 应用程序中使用的函数需要同时操作多个输入选项数据。这种情况下，我们可以使用以下两种方法之一。

方法一：使用对象解构赋值

我们可以使用对象解构赋值语法来操作多个输入选项数据。首先，在组件的 data 选项中声明一个对象并包容所有输入选项的数据。然后，在函数中使用对象解构赋值语法来访问这些数据。

<template>
  <div>
    <input v-model="person.name" type="text">
    <input v-model="person.age" type="number">

    <button @click="updatePerson">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      person: {
        name: '',
        age: null
      }
    }
  },
  methods: {
    updatePerson() {
      const { name, age } = this.person
      // Do something with name and age
    }
  }
}
</script>

这样我们就可以在 updatePerson 函数中同时访问输入选项的值。

方法二：通过参数传递数据

另一种方法是通过函数的参数传递数据。这种方法的好处是可以使用一个通用的函数来操作多个输入选项数据。例如，我们可以编写一个函数，该函数接受一个对象作为参数，并更新对象的属性。

<template>
  <div>
    <input v-model="name" type="text">
    <input v-model="age" type="number">

    <button @click="updatePerson({ name, age })">Update</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: null
    }
  },
  methods: {
    updatePerson({ name, age }) {
      // Do something with name and age
    }
  }
}
</script>

在这种情况下，我们可以将函数 updatePerson 用于任何数据对象，而不仅仅是用于 person 对象。

以上两种方法均可实现在 Vue.js 中的一个函数中操作多个输入选项数据的目的。我们可以根据具体情况选择合适的方法。