vue 點擊展開更多+收起

 1、視圖標籤

<div>
        <p v-for="(item, index) in list">
            <span>{{item.title}}</span>
            <span>{{item.name}}</span>
         </p>
</div>
<div v-if="showList.length > 6" v-on:click="showMore=!showMore">
         <span>{{showMore?'查看更多':'收起'}}</span> 
</div>

 2、data數據

data() {
      return {
        showMore: true,
        list:[...]
      }
}

 3、計算屬性（set方法裏的val值就是get方法返回的值）

computed: {
   showList: {
      get: function () {
         if (this.showMore) {
             if (this.list.length < 4) {
                return this.list
             }
             let newArr = []
             for (var i = 0; i < 3; i++) {
                 let item = this.list[i]
                 newArr.push(item)
              }
              return newArr
           }
           return this.list
        },
        set: function (val) {
            this.showList= val
        }
    }
}

---

 

4、效果圖