<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>
</div>
``
`
data定义: ` brandFold: true,
items: [{
message: "Foo"
}, {
message: "Bar"
}, {
message: "alex"
}],`
计算属性
```computed: {
showdetailList: {
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
}
}
},
methodsd:
changeFoldState () {
this.brandFold = !this.brandFold
console.log(444)
},
VUE展开收缩