巧用v-model绑定数组，让表单中的input输入框动态增减

2024-02-20 11:27:03

从理解v-model开始

在深入探究v-model绑定数组的用法之前，我们首先需要对v-model有一个清晰的认识。v-model是Vue.js中非常重要的一个指令，它允许我们轻松地将表单元素与data中的数据绑定在一起。当表单元素的值发生改变时，v-model会自动更新data中的数据，反之亦然。

在大多数情况下，我们都会将v-model绑定一个简单的字符串数据，比如用户输入的姓名、电子邮件地址或密码等。然而，v-model不仅限于绑定字符串，它还可以绑定数组。

v-model绑定数组的强大之处

将v-model绑定数组可以给我们带来许多好处。首先，它使我们能够在表单中动态增减输入框。这在需要收集用户输入的多项数据时非常有用，例如，购物清单、待办事项列表或调查问卷等。

其次，v-model绑定数组可以使我们更加方便地对表单数据进行操作。我们可以通过数组的增删改查方法来轻松地添加、删除或修改表单中的输入框。

如何使用v-model绑定数组

要使用v-model绑定数组，我们需要在Vue.js组件中定义一个数组。然后，我们可以使用v-model指令将数组绑定到表单元素。当用户在表单元素中输入内容时，数组中的数据也会随之改变。

下面是一个简单的示例，演示如何使用v-model绑定数组来创建一个动态增减输入框的表单：

<template>
  <div>
    <input v-model="items" placeholder="Enter an item">
    <button @click="addItem">Add</button>
    <button @click="removeItem">Remove</button>

    <ul>
      <li v-for="item in items" :key="item">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push('')
    },
    removeItem() {
      this.items.pop()
    }
  }
}
</script>

在这个示例中，我们在组件的data属性中定义了一个名为items的空数组。然后，我们将v-model指令绑定到一个输入框，并将输入框的值绑定到items数组。当用户在输入框中输入内容时，items数组中的数据也会随之改变。

我们在组件的方法中定义了两个方法：addItem()和removeItem()。这两个方法分别用于向items数组中添加和删除元素。当用户点击“添加”按钮时，addItem()方法会调用items数组的push()方法来添加一个空字符串。当用户点击“删除”按钮时，removeItem()方法会调用items数组的pop()方法来删除最后一个元素。

在组件的模板中，我们使用v-for指令来遍历items数组。对于数组中的每个元素，我们都渲染一个li元素，并将其内容设置为数组元素的值。

当用户在输入框中输入内容时，items数组中的数据会随之改变。因此，在ul元素中渲染的li元素也会随之改变。