用vue手写input 批量新增 框

列：实现效果

图（1）

 图（2）

<template>
    <div>
        <button class="btn" @click="addInp">添加input</button>
        <div v-for="(item, index) in inpList" :key="index">
            <input class="inp" type="text" placeholder="姓名" v-model="from.userName">
            <input class="inp" type="text" placeholder="性别" v-model="from.userSex">
            <input class="inp" type="text" placeholder="年龄" v-model="from.userAge">
            <input class="inp" type="text" placeholder="学历" v-model="from.userSchools">
            <!-- 里面不止可以添加input 框还可以添加其他元素 -->
            <button class="btn" @click="delInp(item.id)">删除一组</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            inpList: [""],
            dataList: [],
            from: {
                userName: "",
                userSex: "",
                userAge: "",
                userSchools: ""
            }
        }
    },
    methods: {
        // 添加(新增) input 框方法
        addInp() {
            // 当数量(input数组)超过10个时提示
            if (this.inpList.length >= 10) {
                alert("最多只能加10个哦");
                return;
            } else {
                //添加input 框
                this.inpList.push("")
            }
        },
        //删除(input框)方法 获取到下标 id
        delInp(id) {
            // 当他的数量为 1 时不可删除
            if (this.inpList.length <= 1) {
                return;
            } else {
                // 利用findIndex 数组的循环，查找到符合条件的索引并且打断循环返回找到的索引值 再利用 splice 方法进行删除
                let index = this.inpList.findIndex(obj => obj.index === id);
                this.inpList.splice(index, 1);
            }
        }
    },
    //初始化挂载让删除按钮隐藏 只有超过下标时 显示
    mounted() {
        document.getElementsByClassName("btn")[1].style.display = "none";
    }
}
</script>

<style>
/* css样式可以忽略 */
.inp {
    outline: none;
    font-size: 15px;
    margin-left: 5px;
    margin-top: 15px;
    color: #000000;
    border-radius: 5px;
    padding: 10px 10px;
    border: 2px solid #e3e3e3;
}

.inp:focus {
    border: 2px solid #7fffd4;
    box-shadow: inset 1px 5px 16px 10px rgba(237, 172, 172, 0.5), 1px 5px 16px 10px rgba(237, 172, 172, 0.5);
}

.btn {
    width: 75px;
    border: 0px;
    height: 30px;
    font-size: 14px;
    color: #fff;
    line-height: 30px;
    margin-left: 15px;
    border-radius: 10px;
    transition: all .3s;
    background-color: #00a2ff;
}

.btn:hover {
    color: #fff;
    transition: all .3s;
    background-color: #ff0000;
}
</style>

希望能帮助到各位小伙伴

        记得点赞收藏哦