VUEJS 展开收起问题

Question

假设服务器加载来有60个品牌（一个包含60个对象的json数组），默认展示前8条品牌，点击MORE，展开所有的，这个在VUE里面怎么写比较好一点？

<a class="show_more" @click="showAll" href="javascript:;">M O R E</a>
    <ul class="cls_partners" v-if="isShowAll">
        <li v-for = "(item,index) in partners">
            <img :src="item.url" alt="">
        </li>
    </ul>

我现在写成这样，不知道怎么用index来控制前几条，求指点

Answer 1

<a class="show_more" @click="showAll" href="javascript:;">M O R E</a>
    <ul class="cls_partners" >
        <li v-for = "n in count">
            <img :src="partners[n-1].url" alt="">
        </li>
    </ul>
    
    data(){
        return {
            count:8
        }
    },
    methods:{
        showAll(){
            this.count=this.partners.length
        }
    }

Answer 2

从数据驱动的角度，提供一个直观的方案：

加一个 expanded 数据，点击 more 控制 true / false 切换

<img :src="item.url" alt="" v-if="index < 8 || expanded">

Answer 3

给li加v-if用动态序号去判断。默认index<8，点击more之后index<数组长度

Answer 4

想用index来控制前几条明显不合适，你可以另外定义一个数组，里面刚开始放8条品牌，点击more时候把剩下的52条push到那个数组里，当然，我更建议把所有的都加载进去，设置ul高度，overflow：hidden，点击more时候改变ul高度，这样还可以做动画效果，岂不是更好

Answer 5

多想一步就更好了,你要知道 他会说,哎呀我的item是宽度不定的
然后勒,你就会more消失了

---

所以你要先完这版本后,立马去升级
可以获取具体宽度判断,也可以用css去写,利用css的一些特性,省去一些麻烦事