vue filer 过滤器用法笔记

最新推荐文章于 2024-07-22 16:40:45 发布

big_Mango_

最新推荐文章于 2024-07-22 16:40:45 发布

阅读量513

点赞数

分类专栏： vue 文章标签： vue

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>filter</title>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in filterlist">{{item}}</li>
        </ul>
        <div @click="agg">加载更多</div>
    </div>

    <script src="../js/vue.min.js"></script>
    <script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            size:5,
            list:[
                {"id":0,"title":"11111","cont":"111111"},
                {"id":1,"title":"22222","cont":"111111"},
                {"id":2,"title":"33333","cont":"111111"},
                {"id":3,"title":"44444","cont":"111111"},
                {"id":4,"title":"55555","cont":"55555"},
                {"id":5,"title":"66666","cont":"66666"},
                {"id":6,"title":"77777","cont":"77777"},
                {"id":7,"title":"77777","cont":"88888"},
                {"id":8,"title":"888888","cont":"999999"},
                {"id":9,"title":"000000","cont":"99999"},
                {"id":10,"title":"a88888","cont":"99999"},
                {"id":11,"title":"a22222","cont":"111111"},
                {"id":12,"title":"a33333","cont":"111111"},
                {"id":13,"title":"a44444","cont":"111111"},
                {"id":14,"title":"a55555","cont":"55555"},
                {"id":15,"title":"a66666","cont":"66666"},
                {"id":16,"title":"a77777","cont":"77777"},
                {"id":17,"title":"a77777","cont":"88888"},
                {"id":18,"title":"a888888","cont":"999999"},
                {"id":19,"title":"a000000","cont":"99999"},
                {"id":20,"title":"a88888","cont":"99999"}
            ]
        },
        computed: {
            filterlist: function () {
                var num=this.size;
                return this.list.filter(function (number) {
                        return number.id < num
                })
            }
        },
        methods:{
            agg:function(){
                this.size+=5;
            }
        }
    });
    </script>
</body>

</html>