{"id":46812,"date":"2020-06-22T10:10:50","date_gmt":"2020-06-22T02:10:50","guid":{"rendered":"http:\/\/www.xyryd.com\/?p=46812"},"modified":"2020-06-22T11:47:57","modified_gmt":"2020-06-22T03:47:57","slug":"vue-%e5%ae%9e%e7%8e%b0%e5%88%86%e9%a1%b5%e6%95%88%e6%9e%9c-%e4%bb%a3%e7%a0%81%e5%ae%9e%e4%be%8b","status":"publish","type":"post","link":"http:\/\/www.xyryd.com\/46812.html","title":{"rendered":"Vue \u5b9e\u73b0\u5206\u9875\u6548\u679c \u4ee3\u7801\u5b9e\u4f8b"},"content":{"rendered":"\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title \" >\u76ee\u5f55<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"http:\/\/www.xyryd.com\/46812.html\/#%E5%88%86%E9%A1%B5%E6%80%9D%E8%B7%AF%EF%BC%9A\" title=\"\u5206\u9875\u601d\u8def\uff1a\">\u5206\u9875\u601d\u8def\uff1a<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"http:\/\/www.xyryd.com\/46812.html\/#Javascript%E4%BB%A3%E7%A0%81%EF%BC%9A\" title=\"Javascript\u4ee3\u7801\uff1a\">Javascript\u4ee3\u7801\uff1a<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"http:\/\/www.xyryd.com\/46812.html\/#HTML%E4%BB%A3%E7%A0%81%E9%83%A8%E5%88%86\" title=\"HTML\u4ee3\u7801\u90e8\u5206\">HTML\u4ee3\u7801\u90e8\u5206<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"%E5%88%86%E9%A1%B5%E6%80%9D%E8%B7%AF%EF%BC%9A\"><\/span>\u5206\u9875\u601d\u8def\uff1a<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u9996\u5148\u662f\u5b9a\u4e49\u9875\u53f7currentPage \u548c \u9875\u5927\u5c0fpagesize\uff0c\u7528\u4e00\u4e2a\u6570\u7ec4\u4fdd\u5b58\u603b\u6570\u636e\uff1b<\/p>\n\n\n\n<p>\u7528\u4e00\u4e2a\u8ba1\u7b97\u5c5e\u6027page_arrs\uff0c\u4f5c\u7528\u662f \u8ba9\u9875\u9762\u5c55\u793a\u7684\u662f\u6211\u4eec\u6240\u9700\u8981\u7684\u9875\u9762<\/p>\n\n\n\n<p>\u800c\u6211\u4eec\u5728page_arrs\u4e2d\u8981\u5206\u5272\u539f\u6570\u7ec4\uff0c\u7528\u4e00\u4e2aslice()\u65b9\u6cd5\u8fdb\u884c\u5206\u5272\uff1b<\/p>\n\n\n\n<p>\u5728\u63a7\u4ef6button\u4e0a\u7ed1\u5b9a\u70b9\u51fb\u65b9\u6cd5\uff0c\u5bf9\u9875\u53f7currentPage\u8fdb\u884c\u4fee\u6539\uff0c\u4ece\u800c\u4fee\u6539\u6574\u4e2a\u9875\u9762\u5c55\u793a<\/p>\n\n\n\n<p><strong><a href=\"http:\/\/xyryd.com\/46797.html\">Python Django vue {{}} \u62ec\u53f7\u51b2\u7a81 \u95ee\u9898 \u89e3\u51b3 \u56fe\u6587\u6559\u7a0b<\/a><\/strong><\/p>\n\n\n\n<p>\u5206\u9875css\u91c7\u7528\u4e86bootstrap\u7684\u6807\u51c6\u4ee3\u7801\uff0c\u5728\u4f7f\u7528\u65f6\u76f4\u63a5\u5f15\u7528bootstrap\u7684css\u5373\u53ef\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Javascript%E4%BB%A3%E7%A0%81%EF%BC%9A\"><\/span>Javascript\u4ee3\u7801\uff1a<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>var app = new Vue({\n    delimiters:&#91;'{&#91;', ']}'],\/\/\u533a\u5206django\u7684\u6a21\u677f\u6807\u8bb0\n    el: '#app',\n    data: {\n        arrs: {{goods|safe}},\/\/django\u6a21\u677f\u4e2d\u539f\u6837\u8f93\u51fa\n        titles : &#91;'\u5e8f\u53f7','\u670d\u52a1\u5546','\u673a\u623f',\"CPU\",'\u5185\u5b58','\u786c\u76d8','\u5e26\u5bbd','\u6d41\u91cf','\u7ebf\u8def','IPV4','\u67b6\u6784','\u4ef7\u683c','\u5e93\u5b58'],\n        currentPage : 1,\/\/\u5f53\u524d\u9875\u53f7\n        pagesize :12, \/\/\u6bcf\u9875\u5927\u5c0f\n        all:0,\/\/\u603b\u9875\u6570\n    },\u3000\u3000\n    filters:{\n        formatPrice: function(obj){\n            $str = '';\n            if(obj.annual)\n                $str += '$'+obj.annual+'\/\u5e74&lt;br\/>';\n            if(obj.quarter)\n                $str += '$'+obj.quarter+'\/\u5b63&lt;br\/>';\n            if(obj.month)\n                $str += '$'+obj.month+'\/\u6708&lt;br\/>';\n            return $str;\n        },\n        stockToBuy: function(obj){\n            if( obj.stock === 1 ){\n                return '&lt;a href=\"\/\/xyryd.com\/go\/bwh-'+obj.pid+'\" class=\"btn btn-primary active\" role=\"button\" aria-pressed=\"true\">\u8d2d\u4e70&lt;\/a>';\n            }else{\n                return '&lt;button class=\"btn btn-secondary\" disabled=\"true\">\u552e\u7f44&lt;\/button>';\n            }\n        }\n    },\n    created: function () {\n        var self = this;\n        \/\/ $.ajax({\n        \/\/     \/\/ url: 'http:\/\/vpsdalao.com\/api\/records?provider=Bandwagon',\n        \/\/     url: '\/ajax_goods',\n        \/\/     type: 'get',\n        \/\/     data: {},\n        \/\/     dataType: 'json'\n        \/\/ }).then(function (res) {\n        \/\/     \/\/ console.log(res.data)\n        \/\/     self.items = res.data\n        \/\/ }).fail(function () {\n        \/\/     console.log('\u5931\u8d25');\n        \/\/ })\n    },\n    computed:{\n        page_arrs(){\n            let {currentPage,pagesize,all} = this\n            this.all = Math.ceil(this.arrs.length\/pagesize)\n            return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize)\n        },\n        indexs: function(){\n            var left = 1;\n            var right = this.all;\n            var ar = &#91;];\n            if(this.all>= 5){\n                if(this.currentPage > 3 &amp;&amp; this.currentPage &lt; this.all-2){\n                    left = this.currentPage - 2\n                    right = this.currentPage + 2\n                }else{\n                    if(this.currentPage&lt;=3){\n                        left = 1\n                        right = 5\n                    }else{\n                        right = this.all\n                        left = this.all -4\n                    }\n                }\n            }\n            while (left &lt;= right){\n                ar.push(left)\n                left ++\n            }\n            return ar\n        },\n        current_page(){\n            return this.currentPage\n        }\n    },\n    methods: {\n        primaryPage(){\n            this.currentPage = 1\n        },\n        prePage(){\n            if(this.currentPage == 1){\n                return\n            }\n            this.currentPage = this.currentPage - 1\n        },\n        nextPage(){\n            if(this.currentPage == Math.ceil(this.arrs.length\/this.pagesize)){\n                return\n            }\n            this.currentPage = this.currentPage + 1\n        },\n        lastPage(){\n            this.currentPage = Math.ceil(this.arrs.length\/this.pagesize)\n        },\n        btnClick: function(data){\/\/\u9875\u7801\u70b9\u51fb\u4e8b\u4ef6\n            if(data != this.currentPage){\n                this.currentPage = data \n            }\n        },\n    },\n\n})<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML%E4%BB%A3%E7%A0%81%E9%83%A8%E5%88%86\"><\/span>HTML\u4ee3\u7801\u90e8\u5206<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<pre class=\"wp-block-code\"><code>    &lt;div class=\"container-fluid\" id=\"app\">\n        &lt;section class=\"text-center\">\n            &lt;h1>手机版\u5e93\u5b58\u76d1\u63a7\u5217\u8868&lt;\/h1>\n            &lt;p>&lt;a href=\"\/\/xyryd.com\/go\/bwh\">\u642c\u74e6\u5de5&lt;\/a>\u4f18\u60e0\u7801\uff1a&lt;code>BWH3HYATVBJW&lt;\/code> ,\n            &lt;p>\u6570\u636e\u6700\u540e\u66f4\u65b0\u65f6\u95f4\uff1a&lt;code>{{update_time}}&lt;\/code>&lt;\/p>\n        &lt;\/section>\n\n        &lt;table class=\"table table-striped table-bordered table-hover\">\n            &lt;thead>\n            &lt;tr>\n                &lt;th v-for=\"title in titles\">{&#91;title]}&lt;\/th>\n            &lt;\/tr>\n            &lt;\/thead>\n            &lt;tbody>\n            &lt;tr v-for=\"(item,index) in page_arrs\" :key=\"index\">\n                &lt;td>{&#91;index+1]}#&lt;\/td>\n                &lt;td>{&#91;item.company__name]}&lt;\/td>\n                &lt;td>{&#91;item.dc]}&lt;\/td>\n                &lt;td>{&#91;item.cpu]}&lt;\/td>\n                &lt;td>{&#91;item.ram]}&lt;\/td>\n                &lt;td>{&#91;item.disk]}&lt;\/td>\n                &lt;td>{&#91;item.bandwidth]}&lt;\/td>\n                &lt;td>{&#91;item.traffic]}&lt;\/td>\n                &lt;td>{&#91;item.route]}&lt;\/td>\n                &lt;td>{&#91;item.ipv4]}&lt;\/td>\n                &lt;td>{&#91;item.arch]}&lt;\/td>\n                &lt;td v-html=\"$options.filters.formatPrice(item)\">&lt;\/td>\n                &lt;td v-html=\"$options.filters.stockToBuy(item)\" >&lt;\/td>\n            &lt;\/tr>\n            &lt;\/tbody>\n        &lt;\/table>\n\n        &lt;nav aria-label=\"Page navigation\">\n            &lt;ul class=\"pagination  justify-content-center\">\n              &lt;li :class=\"current_page == 1 ? 'page-item disabled' : 'page-item' \">&lt;a class=\"page-link\" href=\"#\" @click=\"primaryPage\"> &lt;&lt; &lt;\/a>&lt;\/li>\n              &lt;li :class=\"current_page == 1 ? 'page-item disabled' : 'page-item' \">&lt;a class=\"page-link\" href=\"#\" @click=\"prePage\"> &lt; &lt;\/a>&lt;\/li>\n              &lt;li v-for=\"index in indexs\" :class=\"current_page == index ? 'page-item active' : 'page-item' \">&lt;a class=\"page-link\" href=\"#\"  @click=\"btnClick(index)\">{&#91; index ]}&lt;\/a>&lt;\/li>\n              &lt;li class=\"page-item disabled\">&lt;a class=\"page-link\" href=\"#\" aria-disabled=\"true\">{&#91;current_page]} \/ {&#91;all]}&lt;\/a>&lt;\/li>\n              &lt;li :class=\"current_page == all ? 'page-item disabled' : 'page-item' \">&lt;a class=\"page-link\" href=\"#\" @click=\"nextPage()\"> > &lt;\/a>&lt;\/li>\n              &lt;li :class=\"current_page == all ? 'page-item disabled' : 'page-item' \">&lt;a class=\"page-link\" href=\"#\" @click=\"lastPage\"> >> &lt;\/a>&lt;\/li>\n            &lt;\/ul>\n        &lt;\/nav>\n\n    &lt;\/div><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>\u5206\u9875\u601d\u8def\uff1a \u9996\u5148\u662f\u5b9a\u4e49\u9875\u53f7currentPage \u548c \u9875\u5927\u5c0fpagesize\uff0c\u7528\u4e00\u4e2a\u6570\u7ec4\u4fdd\u5b58\u603b\u6570\u636e\uff1b \u7528\u4e00\u4e2a\u8ba1 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":46151,"comment_status":"open","ping_status":"closed","sticky":false,"template":"single-with-sidebar","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[146,283,278],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/posts\/46812"}],"collection":[{"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/comments?post=46812"}],"version-history":[{"count":0,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/posts\/46812\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/media\/46151"}],"wp:attachment":[{"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/media?parent=46812"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/categories?post=46812"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.xyryd.com\/wp-json\/wp\/v2\/tags?post=46812"}],"curies":[{"name":"wp","href":"http:\/\/api.w.org\/{rel}","templated":true}]}}