Vue.js 常用方法

前台：

<head>
    <meta charset="UTF-8">
    <title>公告列表</title>
    <link rel="stylesheet" href="${request.contextPath}/static/user/css/change.css" />
    <link rel="stylesheet" href="${request.contextPath}/static/user/css/pintuer.css" />
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/assert/jquery.mloading.css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/assert/alert.css"/>
    <link rel="stylesheet" type="text/css" href="${request.contextPath}/static/admin/css/teacher/my.css"/>
    <script type="text/javascript" src="${request.contextPath}/static/user/js/jquery.js"></script>
    <script type="text/javascript" src="${request.contextPath}/static/user/js/pintuer.js"></script>
    <script src="${request.contextPath}/static/user/js/vue/vue.min.js"></script>
    <script src="${request.contextPath}/static/user/js/assert/jquery.mloading.js" type="text/javascript"
            charset="utf-8"></script>
    <script src="${request.contextPath}/static/user/js/assert/alert.js" type="text/javascript"
            charset="utf-8"></script>
</head>

<section class="container margin-large-top" id="app" style="display: none">
    <div class="container margin-big-bottom">
        <h5>公告列表</h5>
    </div>
    <ul class="list-text list-underline list-striped">
        <li v-for="anno in content"><span class="date">{{formatDate(anno.addTime)}}</span><a href="JavaScript:;" v-on:click="titleInfo(anno.annoId)" class="text-main">{{anno.annoTitle}}</a></li>
    <#--分页-->
        <div class="container text-center margin-big-top margin-big-bottom">
            <ul class="pagination pagination-group">
                <li>
                    <a href="javaScript:;" v-on:click="prePage()">上一页</a>
                </li>
                <li>
                    <a href="javaScript:;" v-on:click="nextPage()">下一页</a>
                </li>

            </ul>
        </div>
</section>

<script type="text/javascript">
var  v;
var size=10;
//页面开始时加载
$(function () {
    loadData(0, size);
});

//发送获取所有数据请求
function loadData(pager, size) {
    refreshStart();
    $.ajax({
        url: "${request.contextPath}/user/findAllAnnoList",
        type: "post",
        timeout: 20000,
        dataType: "json",
        data: {
            pager: pager,
            size: size
        },
        //请求成功时
        success: function (result, status) {
            console.log(result);
            if (result.resultCode == 0) {

                // $("#listEmptyMessage").css("display", "block");
            } else {

                getVue(result, status);
                $("#app").css("display", "block");
                // }
            }
            refreshEnd();
        },
        //请求失败时
        error: function () {
            refreshEnd();
            alertWarnInfo("网络请求失败");
        }
    });
}

//创建表格数据
function getVue(result, status) {
    if (v) {
        v.$set(v.$data, "result", result);
        v.$set(v.$data, "content", result.resultObj.content);
    } else {
        v = new Vue({
            el: '#app',
            data: {
                result: result,
                content: result.resultObj.content,
            },
            methods: {
                //格式化时间戳
                formatDate: function (value) {
                    var date = new Date(value);
                    Y = date.getFullYear(),
                            m = date.getMonth() + 1,
                            d = date.getDate(),
                            H = date.getHours(),
                            i = date.getMinutes(),
                            s = date.getSeconds();
                    if (m < 10) {
                        m = '0' + m;
                    }
                    if (d < 10) {
                        d = '0' + d;
                    }
                    if (H < 10) {
                        H = '0' + H;
                    }
                    if (i < 10) {
                        i = '0' + i;
                    }
                    if (s < 10) {
                        s = '0' + s;
                    }
                    var t = Y + '-' + m + '-' + d ;
                    return t;
                },

                // 下一页
                nextPage: function () {
                    var result = v.$data.result;
                    if (result.resultObj.last) {
                        alertWarnInfo("已是最后一页");
                    } else {
                        var p = result.resultObj.number + 1;
                        loadData(p, size);
                    }

                },
                //上一页
                prePage: function () {
                    var result = v.$data.result;
                    if (result.resultObj.first == true)
                        alertWarnInfo("已经是第一页了")
                    else {
                        var p = result.resultObj.number - 1;
                        loadData(p, size);
                    }
                }
            },

        });
    }
}
//警告窗口

function alertWarnInfo(info) {
    myWarnAlert = jqueryAlert({
        'title': '温馨提示',
        'content': info,
        'modal': true,
        'width': '30%',
        'height': "20%",
        'animateType': 'linear',
        'buttons': {
            '取消': function () {
                myWarnAlert.close();
            }
        }
    });

}

</script>

猜你喜欢