<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展开收缩
