Vue循环中多个input绑定指定v-model

可以使用数组和对象语法来实现循环中多个input绑定指定v-model。

如果你有一个包含多个对象的数组，每个对象都有一个名为“value”的属性，你可以使用v-for指令循环遍历数组，并使用v-model指令将每个输入框与相应的数组元素的value属性绑定起来。例如：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <label>
        Item {{ index }}:
        <input type="text" v-model="item.value">
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { value: 'Item 1' },
        { value: 'Item 2' },
        { value: 'Item 3' }
      ]
    }
  }
}
</script>

如果你有一个包含多个属性的对象，你可以使用v-bind指令动态绑定每个输入框的v-model值。例如：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <label>
        Item {{ index }}:
        <input type="text" :value="item.value" @input="updateValue(index, $event.target.value)">
      </label>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', value: 'Value 1' },
        { name: 'Item 2', value: 'Value 2' },
        { name: 'Item 3', value: 'Value 3' }
      ]
    }
  },
  methods: {
    updateValue(index, value) {
      this.items[index].value = value
    }
  }
}
</script>

在这个例子中，我们使用v-bind指令动态绑定每个输入框的值，然后在@input事件中调用一个名为updateValue的方法来更新每个对象的value属性。