uniapp实现列表动态添加

1.效果图：

2.代码实现：

这里没有用uniapp提供的uni-list控件

<template>
    <view id="app">
    <!--     这里为了让标题（h）居中展示，给h标签设置了父标签，并设置父标签text-align: center;来实现
        标题内容居中展示 -->
        <view class="biaoti">
            <h3>动态添加</h3>
        </view> 
        姓名：<input class="shurukuang" type="text"  maxlength="8"  confirm-type="next"  placeholder="请输入姓名" v-model="name"/>
        <br>
        年龄：<input class="shurukuang" type="number" maxlength="3" confirm-type="next" placeholder="请输入年龄" v-model="age"/>
        <br>
        班级：<input class="shurukuang" placeholder="请输入班级" maxlength="2" v-model="banji"/>
        <br>
        <button id="add" type="primary" hover-start-time="20" @click="addMember()">添加</button>
    <list-view class="main" id="list-view">
        <list-item class="list_item" :data-bean="item" v-for="(item, index) in dataList" :key="index">
            <view style="height: 1upx; background-color:aliceblue; margin-top: 5upx;"></view>
            <view class="horizontal">
                    <text class="item_value">{{item.name}}</text>
                    <text class="item_value">{{item.age}}</text>
                    <text class="item_value">{{item.banji}}</text>
            </view>
            <view style="height: 5upx; background-color: gainsboro;"></view>
        </list-item>
    </list-view>

    </view>
    
</template>
 
<script setup>
    // const plugin = uni.requireNativePlugin('test')
    export default {
        data() {
            return {
                reply: "",
                msg: "",
                name:"",
                age:"",
                banji:"",
                dataList:[
                    {name:"张三",age:"18",banji:"一班"}
                ]
            }
        },
        onShow: function() {
            //设置状态栏标题
            uni.setNavigationBarTitle({
                title:"人员信息"
            })
        },
        onLoad() {
        },
        methods: {
            addMember(){
                //校验信息是否填写完整
                if(this.name==""){
                    alert("请先输入姓名")
                }else if(this.age==""){
                    alert("请先输入年龄")
                }else if(this.banji==""){
                    alert("请先输入班级")
                }else{
                    //将输入框的数据组装成对象
                    var bean={name:this.name,age:this.age,banji:this.banji}
                    //往list列表添加数据
                    this.dataList.push(bean)
                    //数据添加和刷新成功，清空上一次输入记录
                    this.name=""
                    this.age=""
                    this.banji=""
                }
                
            }
            
 
        }
    }
</script>
 
<style>
    
    
    
    #app{
        text-align: left;
        padding: 16rpx;
    }
    
    
    
    .biaoti{
        text-align: center;
    }
    
    .horizontal{
        text-align: center;
    }
    
    .item_value{
        width: 33%;
        line-height: 60rpx;
        color: black;
        display: inline-block;
    }
    

    
    .shurukuang {
        font-weight: bold;
        padding-left: 1em;
        padding-top: 10rpx;
        padding-bottom: 10rpx;
        border: solid #cecece;
        border-radius: 5rpx;
    }
    
    .h{
        margin-top: 100rpx;
        background: deeppink;
    }
    
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
 
    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }
 
    .text-area {
        display: flex;
        justify-content: center;
    }
 
    .title {
        color: #5555ff;
        width: 100vw;
        display: flex;
        justify-content: center;
    }
</style>

3.列表添加和删除：

1.列表添加对象数据：list.push(item)

2.列表删除对象数据：list.splice(i(下标),1)