vue实现数据超出4个时显示“查看更多”or“收起”功能

1. html里调用showList

<div>
    <div v-for="item in showList" :key="item.name">
    	<span style="margin-left:10px;">
    		{{item.name}}
    	</span>
    </div>
</div>
<div v-if="realList.length > 4" @click="changeFlag" style="text-align: center;">
    <span>
    {{flag?'查看更多':'收起'}}
    </span>
 </div>

2. data数据

 data() {
    return {
    flag: true,
    realList:[
    {name:'aaa'},
    {name:'bbb'},
    {name:'ccc'},
    {name:'ddd'},
    ],
    }
}

3. 使用computed属性
   set方法里的val值就是get方法返回的值

computed: {
   showdetailList: {
      get: function () {
         if (this.brandFold) {
             if (this.realList.length < 5) {
                return this.realList
             }
             let newList= []
             for (var i = 0; i < 4; i++) {
                 let item = this.realList[i]
                 newList.push(item)
              }
              return newList
           }
           return this.realList
        },
        set: function (val) {
            this.showList= val
        }
    }
}

4. changeFlag方法(控制“查看更多”和“收起”的方法）

changeFlag() {
        this.flag= !this.flag
}