vuejs 动态添加input框的实例讲解

下面是关于“vuejs 动态添加input框的实例讲解”的完整攻略：

1. 需求分析

在编写一个表单页面时，通常需要动态添加表单项，比如当用户需要输入多个电话号码时，我们需要在页面上动态添加多个电话输入框。这时我们可以使用 Vue.js 来实现动态添加 input 框。

2. 实现动态添加 input 框的步骤

2.1 定义数据

我们需要定义一个数组来存储 input 框的数据，具体代码如下：

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

2.2 实现添加按钮

我们需要在页面上添加一个添加按钮，当用户点击按钮时，动态添加 input 框。具体代码如下：

<button @click="addInput()">添加</button>

2.3 实现动态添加 input 框

当用户点击添加按钮时，我们需要在 inputs 数组中添加一个新的对象，对象中包含一个 id 属性和一个 value 属性。id 用于动态绑定 input 框的 id，value 用于接收用户输入的值。具体代码如下：

methods: {
  addInput() {
    this.inputs.push({
      id: `input-${this.inputs.length}`,
      value: ''
    });
  }
}

2.4 实现动态绑定 input 框

我们需要使用 v-for 指令来循环渲染 input 框，并给每个 input 框动态绑定 id 和 value 属性。具体代码如下：

<div v-for="input in inputs" :key="input.id">
  <input :id="input.id" v-model="input.value">
</div>

2.5 完整代码

最终的代码如下：

<template>
  <div>
    <div v-for="input in inputs" :key="input.id">
      <input :id="input.id" v-model="input.value">
    </div>
    <button @click="addInput">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: []
    };
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `input-${this.inputs.length}`,
        value: ""
      });
    }
  }
};
</script>

3. 示例说明

示例一

在这个示例中，我们将动态添加三个 input 框，用户可以分别输入姓名、年龄和地址。完整代码如下：

<template>
  <div>
    <div v-for="input in inputs" :key="input.id">
      <label :for="input.id">{{ input.label }}</label>
      <input :id="input.id" v-model="input.value">
    </div>
    <button @click="addInput">添加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        {
          id: "name",
          label: "姓名",
          value: ""
        },
        {
          id: "age",
          label: "年龄",
          value: ""
        },
        {
          id: "address",
          label: "地址",
          value: ""
        }
      ]
    };
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `input-${this.inputs.length}`,
        label: "标签",
        value: ""
      });
    }
  }
};
</script>

示例二

在这个示例中，我们动态添加多个电话号码输入框，用户可以输入多个电话号码。完整代码如下：

<template>
  <div>
    <div v-for="input in inputs" :key="input.id">
      <label :for="input.id">{{ input.label }}</label>
      <input :id="input.id" v-model="input.value" type="tel">
    </div>
    <button @click="addInput">添加电话号码</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputs: [
        {
          id: "phone",
          label: "电话号码",
          value: ""
        }
      ]
    };
  },
  methods: {
    addInput() {
      this.inputs.push({
        id: `input-${this.inputs.length}`,
        label: "电话号码",
        value: ""
      });
    }
  }
};
</script>

上面两个示例演示了如何使用 Vue.js 实现动态添加 input 框。通过使用这个技术，我们可以简化复杂的表单，提高用户体验。