Vue.js 中使用 v-model 和数组处理多个输入框，轻松搞定！

2024-03-08 23:04:31

使用 v-model 和数组在 Vue.js 中处理多个输入框

在 Vue.js 中，处理多个输入框并获取其值的传统方法是使用单独的 v-model 指令绑定到每个输入框。然而，当你需要在数组中存储这些值时，这种方法就会变得复杂。

为了解决这个问题，Vue.js 提供了一个特殊的语法来处理将 v-model 指令绑定到数组的情况。

使用 v-model 与数组

1. 创建一个数组来存储输入值：
在 Vue.js 实例的 data 选项中，创建一个数组来存储输入值。例如：

data() {
  return {
    references: []
  }
}

2. 为每个输入框添加唯一的键：
为每个输入框分配一个唯一的键，这将使 Vue.js 能够将输入值与数组中的相应元素对应起来。

<div id="references">
  <input v-model="references[0]" type="text">
  <input v-model="references[1]" type="text">
  <input v-model="references[2]" type="text">
</div>

3. 动态添加输入框：
如果需要动态添加输入框，可以实现一个方法来向 references 数组添加新元素。例如：

methods: {
  addReference() {
    this.references.push('');
  }
}

示例

以下是一个完整的示例，演示了如何使用 v-model 和数组来处理多个输入框：

new Vue({
  el: "#app",
  data() {
    return {
      references: []
    }
  },
  methods: {
    addReference() {
      this.references.push('');
    }
  }
})