vue点击加载

最新推荐文章于 2022-05-28 14:14:15 发布

红桃讲前端

最新推荐文章于 2022-05-28 14:14:15 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js elementui

本文链接：https://blog.csdn.net/m0_62165756/article/details/124646463

这篇博客主要展示了如何在Vue项目中利用v-for指令和数组操作实现数据的动态加载。通过点击加载更多按钮，将一个预设数组的信息追加到已有信息数组中，实现了内容的逐条加载。在jz方法中，利用了数组的push方法，同时进行了条件判断来控制加载状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原理很简单定义两个数组用数组用数组替换的思想在给一个if循环做如下图

<template>
	<view class="">
		<view class="" v-for="(item,index) in info">
			<h5>{{item.name}}</h5><h5>{{item.id}}</h5><h5>{{item.age}}</h5>
			<button type="default" @click="jz">加载更多</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ww:"",
				// www:true,
				// www:true
				info:[{
					id:1,
					name:"嗡嗡嗡",
					age:"17"
				}],
				info1:[{
					id:1,
					name:"嗡嗡嗡",
					age:"17"
				}]
			}
		},
		methods: {
jz(){
	console.log("ok")
	let arr=this.info.length
	console.log(arr)
	this.info.push(this.info1[arr - 1])
	if(arr===1){
	  console.log("ok")
	}else{
	console.log('继续加载')
	}

}
		}
	}
</script>