vue遍历生成的输入框 绑定及修改值示例

下面是"Vue遍历生成的输入框绑定及修改值示例"的完整攻略：

1. 创建Vue组件

首先，假设我们已经创建了一个Vue组件。该组件有一个数据属性items，它的值是一个包含多个对象的数组。每个对象都包含一个name和一个value属性。例如：

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      <label>{{ item.name }}</label>
      <input type="text" v-model="item.value">
    </div>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: "姓名", value: "" },
        { name: "年龄", value: "" },
        { name: "地址", value: "" }
      ]
    };
  },
  methods: {
    submit() {
      // 处理提交逻辑
    }
  }
};
</script>

该组件会遍历数组items，生成相应的输入框。每个输入框都会绑定到数组中相应对象的value属性上，实现实时同步输入框中的内容。

2. 绑定及修改值

在创建组件时，我们已经将每个输入框的v-model属性绑定到相应的对象的value属性上。这意味着，当用户在输入框中输入内容时，会自动更新相应对象的value属性。因此，我们在组件中的methods属性中可以轻松地获取并处理用户输入的值。

例如，我们可以编写一个submit方法，当用户单击提交按钮时，该方法会打印出所有输入框中的值。

methods: {
  submit() {
    for(let i = 0; i < this.items.length; i++) {
      console.log(this.items[i].value)
    }
  }
}

当我们在输入框中输入内容后，单击“提交”按钮，控制台将分别打印出每个输入框中的内容。

3. 修改默认值

如果我们需要在输入框中设置默认值，则可以在items数组中提供相应的value属性。例如，我们可以将items数组定义如下：

data () {
  return {
    items: [
      { name: "姓名", value: "张三" },
      { name: "年龄", value: 18 },
      { name: "地址", value: "北京市东城区" }
    ]
  };
},

这样，每个输入框都将在创建组件时自动填充相应的默认值。当用户单击“提交”按钮时，我们可以打印出每个输入框中的现有值和默认值：

methods: {
  submit() {
    for(let i = 0; i < this.items.length; i++) {
      console.log(`[${this.items[i].name}] 现有值：${this.items[i].value} 默认值：${this.items[i]['default']}`)
    }
  }
}

以上就是“Vue遍历生成的输入框绑定及修改值示例”的完整攻略，包含了组件的创建和绑定及修改值的内容。在第二个示例中，我们演示了将用户输入的值和默认值打印出来。希望这些信息能够帮助你更好地了解Vue组件的使用。