https://www.wccf.jp/news/news.js

1$.getJSON('../news.json', function(data) {
2    var cate = $('#vue-itemList').attr('data-category');
3    if (cate) {
4        data = data.filter(function(d) {
5            return d.category === cate;
6        });
7    }
8
9    var vm = new Vue({
10        el: '#vue-itemList',
11        data: {
12            newsList: data,
13            page: 0,
14            ITEMS_IN_PAGE: 5,
15        },
16        computed: {
17            canPrev: function() {
18                return this.page > 0;
19            },
20            canNext: function() {
21                return this.page < this.lastPage;
22            },
23            lastPage: function() {
24                return Math.ceil(this.newsList.length / this.ITEMS_IN_PAGE) - 1;
25            },
26        },
27        methods: {
28            prev: function() {
29                if (this.canPrev) {
30                    --this.page;
31                }
32            },
33            next: function() {
34                if (this.canNext) {
35                    ++this.page;
36                }
37            },
38            canShow: function(index) {
39                var first = (this.page) * this.ITEMS_IN_PAGE;
40                var last = (this.page + 1) * this.ITEMS_IN_PAGE;
41                return index >= first && index < last;
42            },
43            getThumbUrl: function(news) {
44                return '../images/common/news/' + news.image;
45            },
46            getHrefUrl: function(news) {
47                return '../' + news.href;
48            },
49        },
50    });
51});