vue中点击查看更多实现_vue实现点击加载更多

场景：

vue2.6.11 中，通过v-for循环list，只想显示前五条，后面的几条要通过查看更多按钮来展示。

如图

解决方案：

列如：list 长度为10，你只想显示前3条，后面几条要通过点击按钮来显示，我们可以先在data中定义两个变量，lookMore:tru,initLength:3,当点击查看更多时，lookmore=false，initLength等于list数组的长度，这样就可以实现了

部分代码：

html

	<div class="input-content" v-show="currentId===item.id&&showInput">
					<textarea :placeholder="placeholder" v-model="content" :maxlength="maxlength"></textarea>
					<el-button type="primary" round @click="published(item)" size="small">发布</el-button>
					<span class="limit-length">{{content.length}}/{{maxlength}}</span>
				</div>
				<div class="comment-child" v-for="(ite,index) in item.children" v-show="index<initLength">
					<img :src="ite.avatar" alt="" class="c-img" v-show="isShowChildAvatar"
						@click="toUserMain(ite.username)">
					<div class="c-right">
						<div class="c-nickname-content">
							<a :href="`#/userMain?username=${ite.username}`" v-text="ite.nickname" target="_blank"></a>
							回复：
							<a :href="`#/userMain?username=${ite.replyUsername}`" target="_blank">@{{ite.replyNickname}}
							</a>
							<span v-text="ite.content" class="c-content"></span>
						</div>
						<div class="c-time">
							<div class="real-time">
								<span v-text="ite.createTime"></span>前
							</div>
							<div class="reply-like">
								<div class="delete-report">
									<span class="el-icon-more"></span>
									<span v-show="username===ite.username" class="delete"
										@click="deleteComment(ite)">删除</span>
									<span v-show="username!==ite.username" class="report"
										@click="reportComment(ite)">举报</span>
								</div>
								<span @click="reply(ite)">回复</span>
							</div>
						</div>

						<div class="input-content" v-show="currentId===ite.id&&showInput">
							<textarea :placeholder="placeholder" v-model="content" :maxlength="maxlength"></textarea>
							<el-button type="primary" round @click="published(item,ite)" size="small">发布</el-button>
							<span class="limit-length">{{content.length}}/{{maxlength}}</span>
						</div>
					</div>
				</div>
				<div class="look-more" v-show="item.children.length>3&&lookMore" @click="selectMore(item.children.length)">查看更多</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

js

data() {
			return {
				currentId: 0,
				placeholder: '对Ta想说点什么',
				showInput: false,
				content: '',
				firstContent: '',
				form: {
					content: '',
					parentId: null,
					replyNickname: '',
					replyUsername: ''
				},
				lookMore:true,
				initLength:3
			}
		},
		methods: {
		    selectMore(leg){
				this.lookMore=false
				this.initLength=leg
			},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22