uniapp实现列表动态添加

1.效果图：

2.代码实现：

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

<template>
   <view id="app">
   
       <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>