vue实现数据超出4个时显示“查看更多”or“收起”功能
- html里调用showList
<div>
<div v-for="item in showList" :key="item.name">
<span style="margin-left:10px;">
{{item.name}}
</span>
</div>
</div>
<div v-if="realList.length > 4" @click="changeFlag" style="text-align: center;">
<span>
{{flag?'查看更多':'收起'}}
</span>
</div>
- data数据
data() {
return {
flag: true,
realList:[
{name:'aaa'},
{name:'bbb'},
{name:'ccc'},
{name:'ddd'},
],
}
}
- 使用computed属性
set方法里的val值就是get方法返回的值
computed: {
showdetailList: {
get: function () {
if (this.brandFold) {
if (this.realList.length < 5) {
return this.realList
}
let newList= []
for (var i = 0; i < 4; i++) {
let item = this.realList[i]
newList.push(item)
}
return newList
}
return this.realList
},
set: function (val) {
this.showList= val
}
}
}
- changeFlag方法(控制“查看更多”和“收起”的方法)
changeFlag() {
this.flag= !this.flag
}