vue點選收起部分隱藏
阿新 • • 發佈:2019-01-07
效果
程式碼
<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
}
}