关于vue.js

<script src="../js/jqPaginator.min.js"></script><script src="../js/bootbox.min.js"></script><link rel="stylesheet" href="../css/basicGood.css" /><div id="vue_goodItem" class="content">    <div class="title" role="title">        <strong class="l">产品管理</strong>        <div class="right">            <div class="seach">                <input type="text" id="searchCondition" placeholder="根据标题、品类搜索" class="form-control">                <button type="submit" @click="search" id="search-btn" class="btn btn-flat">                    <i class="fa fa-search"></i>                </button>            </div>        </div>    </div>    <div class="content-controller">        <span class="r">共有数据：<strong>{{ data.total }}</strong> 条</span>    </div>    <table id="example2" class="table table-bordered table-hover dataTable" role="grid"           aria-describedby="example2_info">        <thead>        <tr role="row">            <th>标题</th>            <th>原价</th>            <th>期数</th>            <th>浏览人数</th>            <th>当前抢购人数</th>            <th>状态</th>            <th>品类名</th>            <th>中奖码</th>            <th>中奖人</th>            <th>结束时间</th>            <th>操作</th>        </tr>        </thead>        <tbody class="goodBody">        <template v-for="(goodItem, index) in goodItems ">            <tr>                <td>{{ goodItem.title }}</td>                <td>{{ goodItem.virtualPrice }}</td>                <td>{{ goodItem.term }}</td>                <td>{{ goodItem.browseSum }}</td>                <td>{{ goodItem.personSum }}</td>                <!--<td>{{ goodItem.status }}</td>-->                <!--{{depositItem.payMethod==0 ? '支付宝'：（deposititem.payMethod==1 ? '微信支付' :'京东支付'）}}-->                <td v-if=" goodItem.status  =='1'">抢购中</td>                <td v-else-if="goodItem.status =='2'">即将开奖</td>                <td v-else-if=" goodItem.status =='3'">抢购结束</td>                <td v-else-if=" goodItem.status =='4'">上架异常，强制下架</td>                <td>{{ goodItem.name }}</td>                <!--根据抢购状态判断是否显示 中奖码-->                <td v-if=" goodItem.status  =='1'">暂无</td>                <td v-else-if=" goodItem.status  =='2'">暂无</td>                <td v-else-if=" goodItem.status  =='3'">{{ goodItem.code }}</td>                <td v-else-if=" goodItem.status  =='4'">暂无</td>                <td v-if=" goodItem.status  =='1'">暂无</td>                <td v-else-if=" goodItem.status  =='2'">暂无</td>                <td v-else-if=" goodItem.status  =='3'">{{ goodItem.memberId }}</td>                <td v-else-if=" goodItem.status  =='4'">暂无</td>                <!--根据抢购状态判断是否显示结束时间-->                <td v-if=" goodItem.status  =='1'">----</td>                <td v-else-if=" goodItem.status  =='2'">----</td>                <td v-else-if=" goodItem.status  =='3'">{{ goodItem.endTime }}</td>                <td v-else-if=" goodItem.status  =='4'">----</td>                <td>                    <button @click="relatedBasicGood"  :id="goodItem.id" class="btn radius  btn-bitbucket">查看</button>                </td>            </tr>        </template>        </tbody>    </table></div></div><div id="editPop" class="popu"></div><div id="paginationDIV">    <ul class="pagination" id="pagination"></ul></div><script>    var data = {        data: "",        currentPage: "",        goodItems: "",    };    var vue_goodItem = new Vue({        el: '#vue_goodItem',        data: data,        methods: {            relatedBasicGood: function (event) {                $$.ajax({                    url: window.location.protocol + "//" + window.location.host + "/back/page/relatedBasicGood.html",                    type: "GET",                    success: function (data) {                        $$.success(data, function (data) {                            sessionStorage.setItem("goodItemId", event.target.id);                            $(".content-wrapper").html(data);                        })                    }                });            },            search: function () {                toGoodItem();            },            closePop: function () {                $(".opcity").css("display", "none");                $("#editPop").css("display", "none");                $("#addPop").css("display", "none");            }        }    });    var condition = null;    function toGoodItem() {        vue_goodItem._data.currentPage = sessionStorage.getItem("currentPage");        var url = window.location.protocol + "//" + window.location.host +'/rest/goodItem/queryGoodPage';        if (!vue_goodItem._data.currentPage) {            vue_goodItem._data.currentPage = 1;        }        var params = {            //size: 12            pageSize:12        };        if ($('#searchCondition').val() != '') {            url = window.location.protocol + "//" + window.location.host +'/rest/goodItem/queryConditionPage';            if(condition == null) {                condition = $('#searchCondition').val();                sessionStorage.setItem("currentPage", 1);                vue_goodItem._data.currentPage = 1;            } else if(condition != $('#searchCondition').val()) {                condition = $('#searchCondition').val();                sessionStorage.setItem("currentPage", 1);                vue_goodItem._data.currentPage = 1;            }            params.condition = condition;        }        //END        params.currentPage = vue_goodItem._data.currentPage;        $$.ajax({            url: url,            type: "GET",            data: params,            success: function (data) {                $$.success(data, function (data) {                    if (data.data) {                        vue_goodItem._data.goodItems = data.data.records;                        //  debugger                        vue_goodItem._data.data = data.data;                        initPagination();                    } else {                        vue_goodItem._data.goodItems = "";                    }                })            }        });    }    var firstLoad = true;    function initPagination() {        vue_goodItem._data.currentPage = parseInt(vue_goodItem._data.currentPage);        $("#pagination").jqPaginator({            totalPages: vue_goodItem._data.data.pages,            visiblePages: vue_goodItem._data.data.pages < 10 ? vue_goodItem._data.data.pages : 10,            currentPage: vue_goodItem._data.currentPage,            first: '<li class="first"><a href="javascript:void(0);">首页<\/a><\/li>',            prev: '<li class="prev"><a href="javascript:void(0);">上一页<\/a><\/li>',            next: '<li class="next"><a href="javascript:void(0);">下一页<\/a><\/li>',            last: '<li class="last"><a href="javascript:void(0);">末页<\/a><\/li>',            page: '<li class="page"><a href="javascript:void(0);">{{page}}<\/a><\/li>',            onPageChange: function (pageNum) {                if (firstLoad) {                    firstLoad = false;                    return;                }                if(pageNum == vue_goodItem._data.currentPage) return;                sessionStorage.setItem("currentPage", pageNum);                toGoodItem();            }        })    }    toGoodItem();</script><script>//    $(function(){//        function xunhuan(){//            for(var i=0;i<$("vue_goodItem tr").length;i++){//                console.log($("vue_goodItem tr").eq(i).children("td"))//                if($("vue_goodItem tr").eq(i).children("td").html() ==1){//                    $("vue_goodItem tr").eq(i).children("td").html("抢购中")//                }else if($("vue_goodItem tr").eq(i).children("td").html() ==2){//                    $("vue_goodItem tr").eq(i).children("td").html("开启倒计时中")//                }else if($("vue_goodItem tr").eq(i).children("td").html() ==3){//                    $("vue_goodItem tr").eq(i).children("td").html("抢购结束")//                }else if($("vue_goodItem tr").eq(i).children("td").html() ==4){//                    $("vue_goodItem tr").eq(i).children("td").html("问题的上架记录，被强制下架")//                }//            }//        }//        xunhuan();//    })</script>