vue 点击展开更多+收起

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/QQ_Empire/article/details/101304996

 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、效果图