vue 點擊展開顯示更多(點擊收起部分隱藏)

<div>
    <p v-for="(item, index) in showdetailList">
      <span>{{item.title}}</span>
      <span>{{item.name}}</span>
     </p>
</div>
<div v-if="detailList.length > 6" v-on:click="changeFoldState">
     <span>{{brandFold?'展開':'收起'}}</span>
 </div>

data() {
   return {
brandFold: true
   }
}

mocData() {
  var items = ['Dr.Ci:Labo城野醫(yī)生', '日本', '控油  收斂毛孔', '任何膚質', '面部', '化妝水', '任何膚質', '面部', '化妝水']
  var lists = ['商品品牌', '品牌國', '功能', '適合膚質', '適用部位', '產品類型', '商品品牌', '品牌國', '功能']
  for (var i = 0; i < items.length; i++) {
     let item = {title: lists[i], name: items[i]}
     this.detailList.push(item)
  }
  console.log(this.detailList)
}

computed: {
  showdetailList: {
   get: function () {
     if (this.brandFold) {
       if (this.detailList.length < 7) {
        return this.detailList
       }
       let newArr = []
       for (var i = 0; i < 6; i++) {
         let item = this.detailList[i]
         newArr.push(item)
       }
       return newArr
      }
      return this.detailList
    },
    set: function (val) {
      this.showdetailList = val
    }
  }
}

changeFoldState() {
    this.brandFold = !this.brandFold
}