Vue 取出记录数后，页面显示刚开始显示部分，点击更多显示全部

实例的实现，是使用computed计算属性，还有对数组使用.slice函数，不改变原数据对象。

<div id="app">
     <ul>
         <li v-for="item in filterlist">{{item}}</li>
     </ul>
    <a v-if="limitN!=list.length" v-on:click="limitN=list.length">
        More >
    </a>
</div>
<script type="text/javascript">
    
    var app = new Vue({
        el: "#app",
        data: {
            list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
            limitN:3
        },
        computed: {
            filterlist: function () {
                return this.list.slice(0, this.limitN);
            }
        }
    })
</script>

 

转载于:https://www.cnblogs.com/lunawzh/p/7523026.html