使用computed计算属性来控制数据的展示数量

一个数组中有20条数据，控制在初始化展示的时候只显示前3条，点击加载更多按钮后显示全部的按钮

<h1>使用计算属性控制数据只显示几条</h1>
<ul>
    <li v-for="(item,index) in filterList">{{item.title}}</li>
</ul>
<p @click="more">查看更多</p>

使用computed控制数据只展示前3条，点击参看更多的时候，将显示的数量变成数据的总长度

var list=[
    {title:'我是标题1'},
    {title:'我是标题2'},
    {title:'我是标题3'},
    {title:'我是标题4'},
    {title:'我是标题5'},
    {title:'我是标题6'},
    {title:'我是标题7'}
];

var vm=new Vue({
    el:".app",
    data:{
        list:list,
        listNum:3
    }
    computed:{
        filterList:function(){
            return this.list.slice(0,this.listNum);
        }
    }

,
methods:{
    more:function(){
        this.listNum=this.list.length;
    }
},

});

转载于:https://www.cnblogs.com/qiuchuanji/p/7880551.html