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

动图演示

数据结构

<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>