vue.js - VUEJS 展开收起问题

问题描述

问 题

假设服务器加载来有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来控制前几条，求指点

解决方案

<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
        }
    }

这篇关于vue.js - VUEJS 展开收起问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！