vue中点击查看更多实现
vue2.6.11 中,通过v-for循环list,只想显示前五条,后面的几条要通过查看更多按钮来展示。
·
场景:
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>
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
},
更多推荐
已为社区贡献5条内容
所有评论(0)