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

下面就来详细讲解“vuejs 动态添加input框的实例讲解”的完整攻略。

简介

在网页开发中，有时候需要根据用户需求动态添加表单输入框，这个过程可以用Vue的v-for指令实现。v-for指令用于绑定数组数据，允许我们对数组数据进行循环渲染。下面通过两个示例来详细讲解Vue动态添加input框的实现方法。

示例一：按钮添加input框

该示例演示按下按钮就会添加一个 input 框，按钮的显示可以是事件绑定，也可以是动态赋值，具体实现如下：

代码结构：

<div id="app">
    <button @click="add" v-show="showBtn">添加</button>
    <input type="text" v-for="(item, index) in items" :key="index" v-model="item">
</div>

App.js:

let app = new Vue({
    el: '#app',
    data: {
        items: [],
        showBtn: true
    },
    methods: {
        add() {
            this.items.push("");
        }
    }
});

注释说明：

• 通过v-for指令循环渲染数据items中的每一项，同时通过key属性绑定唯一键值，方便Vue识别元素。
• 点击 "添加" 按钮时通过methods中的add()方法添加items数组中的一项。

示例二：选择框动态生成input框

该示例演示当选择框中的选项改变时，动态生成对应的 input 框。下面具体实现：

代码结构:

<div id="app">
    <select v-model="selected">
      <option v-for="option in options">{{ option }}</option>
    </select>
    <div v-if="selected">
      <span>你选择的是：{{ selected }}</span>
      <br/>
      <br/>
      <button @click="addInput">添加{{ selected }}</button>
      <div v-for="(item,index) in inputList[selected]" :key="index">
        <input v-model="item"/>
      </div>
    </div>
</div>

App.js:

let app = new Vue({
    el: '#app',
    data: {
        selected: '',
        options: ['A', 'B', 'C'],
        inputList: { A: [], B: [], C: [] },
    },
    methods: {
        addInput() {
            this.inputList[this.selected].push("");
        }
    }
});

注释说明：

• 通过 v-model 绑定选择框的选项，记录选择框选择的值。
• 当选择框选项发生变化时，在options数组中查找对应选项，并在inputList对象中创建一个空数组。
• 通过v-for指令循环渲染inputList[selected]中的每一项，并且通过input框与其双向绑定。同时，通过点击按钮事件触发addInput()方法，在inputList[selected]中push进入一个新的空字符串。

以上就是两个 Vue 动态添加input框的示例和实现方法，希望可以帮助到你。