[demo](https://chengheai.github.io/daily-vue-demo/#/element)
效果
代码
<div>
<div v-for="item in showdetailList" :key='item.message'>
<h3>{{item.message}}</h3>
</div>
</div>
<el-button type="success" v-if="items.length > 2" v-on:click="changeFoldState">
<span>{{brandFold?'展开':'收起'}}</span>
</el-button>
data(){
return {
brandFold: true,
items: [{
message: "Foo"
}, {
message: "Bar"
}, {
message: "alex"
}]
}
},
computed: {
showetailList: {
get: function () {
if (this.brandFold) {
if (this.items.length < 3) {
return this.items
}
let newArr = []
for (var i = 0; i < 2; i++) {
let item = this.items[i]
newArr.push(item)
}
return newArr
}
return this.items
},
set: function (val) {
this.showdetailList = val
}
}
},
methods: {
changeFoldState() {
this.brandFold = !this.brandFold
}
}