vue动态新增表单（附演示）_vue createelement动态表单

动图演示

数据结构

<template>
    <div>
        <div v-for="(item , index) in user" :key="index">
            姓名：<input type="text" v-model="item.name">
            年龄：<input type="text" v-model="item.age">
            性别: <input type="radio" :name="'sex'+ index" value="1" v-model="item.sex"> 男
                  <input type="radio" :name="'sex'+ index" value="0" v-model="item.sex"> 女
            <button @click="delUser(item)">删除</button>
        </div> 
        <button @click="addUser()">新增一行</button> 
    </div>
</template>
<script>
export default {
    name: "list",
    data() {
        return {
            user: [
                {
                    name: "",
                    age: "",
                    sex: ""
                }
            ]
        }
    },
    methods: {
        addUser() {
            this.user.push({
                name: "",
                age: "",
                sex: ""
            })
        },
        delUser(item) {
            var index = this.user.indexOf(item);
            if (index !== -1) {
                this.user.splice(index, 1);
            }
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43