@section CssSection{

    <style>

        [v-cloak] { display: none; }

    </style>

}

<div id="list">

    <ul class="newsList">

        <li class="newsItem" v-for="item in list" v-cloak>

            <a v-bind:href="'/Office/Detail/'+item.ID">

                <div class="newsImg">

                    <img v-bind:src="item.ImageUrl" />

                </div>

                <div class="newsTxt">

                    <p class="newsTitle">{{item.Name}}</p>

                    <p class="newsIntro">{{item.Preface}}</p>

                    <p class="newsTime">{{formatDate(item.CreateTime)}}</p>

                </div>

            </a>

        </li>

    </ul>

    <div class="more" v-if="page < pageCount" id="loadmore" v-on:click="loadMore">

        <a href="javascript:;" class="btnFull">+ 更多</a>

    </div>

</div>

@section ScriptSection{

    <script src="http://cdn.bootcss.com/vue/2.0.7/vue.min.js"></script>

    <script>

        var app = new Vue({

            el: '#list',

            data: {

                page: 1,

                pageCount: 0,

                list: []

            },

            methods: {

                getData: function () {

                    $.getJSON("/Office/ListData?page=" + app.page, function (data) {

                        app.pageCount = Math.ceil(data.record / 10);

                        app.list = app.list.concat(data.list);

                    })

                },

                formatDate: function (val) {

                    var date = new Date(parseInt(val.replace("/Date(", "").replace(")/", ""), 10));

                    return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDay();

                },

                loadMore: function () {

                    app.page += 1;

                    app.getData();

                    return false;

                }

            }

        });

        app.getData();

    </script>

}