Vue.js 数组对象的 v-model 使用方法

在本文中，我们将介绍如何在 Vue.js 中使用 v-model 来处理数组对象。

简介

Vue.js 是一个轻量级的 JavaScript 框架，用于构建用户界面。它采用了 MVVM 模式，使开发者能够通过数据驱动视图，轻松管理页面的状态和交互。

v-model 是 Vue.js 提供的一个指令，用于双向绑定表单元素和组件的数据。它可以在表单元素值变化时更新数据，并在数据变化时更新表单元素的值。在处理数组对象时，我们需要注意一些使用技巧。

数组对象的 v-model 使用方法

单一数组对象

如果我们有一个单一的数组对象，可以通过在 v-model 中使用点操作符来绑定数组对象的属性。例如，我们有一个包含用户信息的数组，每个用户有 name 和 age 两个属性：

<template>
  <div>
    <div v-for="(user, index) in users" :key="index">
      <input v-model="users[index].name" type="text" placeholder="姓名">
      <input v-model.number="users[index].age" type="number" placeholder="年龄">
    </div>
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
      ]
    }
  },
  methods: {
    addUser() {
      this.users.push({ name: '', age: 0 });
    }
  }
}
</script>

在上述示例中，我们通过 v-for 遍历 users 数组，并使用 v-model 绑定每个用户的 name 和 age 属性。通过点击“添加用户”按钮，我们可以动态地添加更多用户的输入框。

多个数组对象

如果我们有多个数组对象，可以使用计算属性和 v-bind 指令来实现 v-model 的双向绑定。

<template>
  <div>
    <div v-for="(user, index) in users" :key="index">
      <input v-model="name[index]" type="text" placeholder="姓名">
      <input v-model.number="age[index]" type="number" placeholder="年龄">
    </div>
    <button @click="addUser">添加用户</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
      ],
      name: [],
      age: [],
    }
  },
  computed: {
    bindName() {
      return this.name.map((item, index) => {
        return {
          name: item,
          age: this.age[index]
        };
      });
    }
  },
  methods: {
    addUser() {
      this.users.push({ name: '', age: 0 });
    }
  }
}
</script>