uniapp中列表无数据时，显示暂无数据

原来的效果代码

目前接口后端返回过来的数据是为空，

源代码：

<templete>
	<view class="team">
					<view class="on-team">
						<view class="item">ID</view>
						<view class="item">手机号</view>
						<view class="item">配送费</view>
						<view class="item">操作</view>
					</view>
					<view style="height: 1280rpx; overflow: auto;">
						<view class="on-team" v-for="item in listData">
							<view class="item">{{item.id}}</view>
							<view class="item">{{item.phone}}</view>
							<view class="item">{{item.deliveryMoney}}</view>
							<view class="item"><button class="btn" size="mini" @click="update(item.id)">修改</button>
							</view>
						</view>
					</view>
				</view>
</templete>
<script>
 export default {
     data() {
			return {
				listData: [],
				reload: false, //是否下拉重新加载
				status: 'more',
				size: 20,
				current: 1,
				total: 0,
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
			};
		},
        onLoad() {
			this.reload = true;

		},
		onShow() {
			this.getList();
		},
		onPullDownRefresh() {
			this.reload = true;
			this.getList();
		},
		onReachBottom() {
			this.status = this.listData.length >= this.total ? '' : 'more';
			this.getList();
		},
        methods: {
            	getList() {
				uni.stopPullDownRefresh();
				if (this.listData.length != 0 && this.listData.length == this.total) return;
				if (this.listData.length < this.total) {
					this.current = this.reload ? 1 : this.current + 1;
				}
				let query = `?current=${this.current}&size=${this.size}&type=1`;
				this.ajax.get(this.jk.userList + query).then(res => {
					if (res.status == 200) {
						//console.log(res.data.data)
						this.total = res.data.data.total;
						let list = res.data.data.records;
						this.listData = this.reload ? list : this.listData.concat(list);
						if (list.length < this.size) this.status = '';
						this.reload = false;
					}
				})
			},
     }
}
</script>
<style>
// 列表样式
	.team {
		margin-top: 20rpx;

		.on-team {
			display: flex;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-bottom: 1px solid #EEEEEE;
			padding: 16rpx 0;

			.item {
				width: 33%;
				text-align: center;
			}
		}
	}
</style>

要在 Vue 中显示“暂无数据”的信息，当 listData 为空数组时，您可以使用 v-if 和 v-else 指令。v-if 指令用于在满足某个条件时渲染元素，而 v-else 用于当这个条件不满足时渲染另一个元素。

在您的代码中，您可以添加一个条件检查以判断 listData 是否为空。如果 listData 为空（长度为 0），则显示“暂无数据”的信息。修改后的代码如下：

<view style="height: 1280rpx; overflow: auto;">
    <!-- 只有当 listData 有数据时，循环显示数据 -->
    <view class="on-team" v-for="item in listData" v-if="listData.length > 0">
        <view class="item">{{ item.id }}</view>
        <view class="item">{{ item.phone }}</view>
        <view class="item">{{ item.deliveryMoney }}</view>
        <view class="item">
            <button class="btn" size="mini" @click="update(item.id)">修改</button>
        </view>
    </view>
    
    <!-- 当 listData 为空时，显示暂无数据 -->
    <view v-else>
        暂无数据
    </view>
</view>

如果您只想使用 v-if 而不是 v-else 来处理这种情况，您可以在同一级别的元素上分别使用两个 v-if 指令。一个用于检查 listData 是否有元素并渲染列表，另一个用于检查 listData 是否为空并显示“暂无数据”的信息。请注意，这样做的前提是 v-for 和 v-if 不应该在同一个元素上使用，因为这会降低性能并可能导致不可预测的渲染行为。

修改后的代码如下：

<view style="height: 1280rpx; overflow: auto;">
    <!-- 如果 listData 有数据，则循环显示数据 -->
    <view v-if="listData.length > 0">
        <view class="on-team" v-for="item in listData" :key="item.id">
            <view class="item">{{ item.id }}</view>
            <view class="item">{{ item.phone }}</view>
            <view class="item">{{ item.deliveryMoney }}</view>
            <view class="item">
                <button class="btn" size="mini" @click="update(item.id)">修改</button>
            </view>
        </view>
    </view>

    <!-- 如果 listData 为空，则显示暂无数据 -->
    <view v-if="listData.length === 0">
        暂无数据
    </view>
</view>

在这个修改中：

1. 第一个 v-if="listData.length > 0": 检查 listData 是否有元素。如果有，渲染数据列表。
2. 第二个 v-if="listData.length === 0": 检查 listData 是否为空。如果为空，显示“暂无数据”。

这种方式下，您避免了使用 v-else，同时确保了只有一个条件被满足时才渲染相应的内容。