Vuejs在移動(dòng)端的真機(jī)上數(shù)據(jù)渲染不出來

第一次用vue,寫的demo在PC端瀏覽器和瀏覽器模擬器里面數(shù)據(jù)都是正常顯示,交互也沒問題.結(jié)果在手機(jī)真機(jī)上測試出現(xiàn)數(shù)據(jù)渲染不出來.希望大家?guī)兔獯鹨幌聗
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>雙十一活動(dòng)</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .title1 {
            color: #fff;
            font-size: 16px;
            padding: 10px;
        }

        .panel {
            margin-bottom: 0px;
        }

        .table {
            margin-bottom: 0px;
        }

        .progress {
            margin-top: 10px;
            margin-bottom: 0px;
            background-color: #411361;
            border: 2px solid #8429c3;
        }

        .progress-bar {
            background-color: #f1124c;
        }

        .counter {
            font-size: 14px;
            color: #fff;
            margin: 5px 0;
        }

        .amount-buy {
            margin: 10px 0;
            background-color: #391453;
            color: #fff;
        }

        .div1 {
            padding-left: 0px;
        }

        .div2 {
            padding: 5px;
            text-align: center;
        }

        .btn-buy {
            width: 100%;
            color: #fff;
            background-color: #8429c3;
            border-style: none;
            font-size: 10px;
        }

        .daoju-item {
            background-color: #320f4a;
        }

        .min-buy,
        .max-buy {
            background-color: #1f092f;
            color: #fff;
            font-size: 15px;
            border: 2px solid #e8a005;
        }

        .btn-circle {
            width: 30px;
            height: 30px;
            text-align: center;
            padding: 6px 0;
            font-size: 24px;
            line-height: 15px;
            border-radius: 15px;
        }

        .activity1 {
            position: relative;
        }

        .buy-click-area {
            position: absolute;
            width: 50%;
            height: 16%;
            top: 79%;
            left: 26%;
            text-align: center;
            line-height: 36px;
            border-radius: 8px;
            background-color: #e8a005;
            color: #fff;
            font-size: 14px;
            cursor: pointer;
        }

        .had-buy {
            background-color: #808080;
            color: #fff;
            cursor: pointer;
        }

        .foot {
            margin-top: 20px;
        }

        .table>tbody>tr>td,
        .table>tbody>tr>th,
        .table>tfoot>tr>td,
        .table>tfoot>tr>th,
        .table>thead>tr>td,
        .table>thead>tr>th {
            border: 1px solid #320f4a;
            margin: 10px;
            padding: 5px;
        }

        .media-object {
            height: 200px;
            width: 300px;
        }

        .media-left {
            padding-top: 4px;
        }

        @media screen and (max-width: 350px) {
            .media-object {
                height: 20px;
                width: 20px;
            }

            .media-left {
                padding-top: 2px;
            }
        }

        @media screen and (min-width: 500px) {
            .container {
                width: 430px;
            }
        }

        .list-group {
            padding-left: 0;
            margin-bottom: 10px;
        }

        .list-group-item {
            position: relative;
            display: block;
            padding: 5px 10px;
            margin-bottom: -1px;
            background-color: #012336;
            border: 1px solid #000;
            color: #fff;
        }

        .col-xs-12 {
            padding-left: 15px;
            padding-right: 15px;
        }

        .panel-primary {
            border-style: none;
        }

        .panel-primary .panel-heading {
            color: #fff;
            background-color: #1f092f;
            border-style: none;
        }

        .panel-primary .panel-body {
            background-color: #1f092f;
        }

        .btn.focus,
        .btn:focus,
        .btn:hover {
            color: #000;
            text-decoration: none;
        }

        .btn.active.focus,
        .btn.active:focus,
        .btn.focus,
        .btn:active.focus,
        .btn:active:focus,
        .btn:focus {
            outline: 0px auto;
            outline-offset: 0px;
        }

        .container1 {
            display: flex;
            padding: 5px;
        }

        .left,
        .right {
            flex: 1;
            position: relative;
        }

        .right {
            margin-left: 5px;
        }
    </style>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body style="display: block; margin-left: auto; margin-right: auto; background-color: #1f092f;">
<div style="display: block; margin-left: auto; margin-right: auto; padding-top: 300px; background:no-repeat top url(images/top.jpg);"></div>
<div class="container" style="display: block;margin-top: 10px;margin-left: auto; margin-right: auto;background-color: #180137;">
    <!-- 活動(dòng)1 -->
    <div class="row" id="activity1">
        <div class="col-xs-12 title1">銀月亮禮包</div>
        <div class="container1">
            <div class="left">
                <img class="media-object img-responsive" style="height:240px;width:100%;" src="images/silver-moon-activity1.jpg">
                <div class="buy-click-area" v-bind:class="{'had-buy': isBuy1}" v-on:click="buyGift(1)">
                    <span v-if="isBuy1">已購買</span>
                    <span v-if="!isBuy1">立即購買</span>
                </div>
            </div>
            <div class="right">
                <img class="media-object img-responsive" style="height:240px;width:100%;" src="images/silver-moon-activity2.jpg">
                <div class="buy-click-area" v-bind:class="{'had-buy': isBuy2}" v-on:click="buyGift(2)">
                    <span v-if="isBuy2">已購買</span>
                    <span v-if="!isBuy2">立即購買</span>
                </div>
            </div>
        </div>

        <div class="col-xs-12 title1">金月亮禮包</div>
        <div class="container1">
            <div class="left">
                <img class="media-object img-responsive" style="height:240px;width:100%;" src="images/gold-moon-activity1.jpg">
                <div class="buy-click-area" v-bind:class="{'had-buy': isBuy3}" v-on:click="buyGift(3)">
                    <span v-if="isBuy3">已購買</span>
                    <span v-if="!isBuy3">立即購買</span>
                </div>
            </div>
            <div class="right">
                <img class="media-object img-responsive" style="height:240px;width:100%;" src="images/gold-moon-activity2.jpg">
                <div class="buy-click-area" v-bind:class="{'had-buy': isBuy4}" v-on:click="buyGift(4)">
                    <span v-if="isBuy4">已購買</span>
                    <span v-if="!isBuy4">立即購買</span>
                </div>
            </div>
        </div>
    </div>
    <!-- /活動(dòng)1 -->

    <div class="col-xs-12" style="background-color: #280d3a;padding: 10px 0;margin: 20px 0;">
        <p class="text-center" style="font-size: 18px;color: #FFFFFF;">超值奪寶瘋狂搶</p>
        <p class="text-center" style="font-size: 13px;color: #817888;">活動(dòng)期間共計(jì) 6 檔道具,低至一鉆,等你搶購!</p>
    </div>

    <!-- 活動(dòng)2 -->
    <table class="table table-condensed" id="activity2">
        <tr v-for="(row,i) in listDaoJu">
            <td v-for="(cell,j) in row" class="daoju-item">
                <div :id="'T_'+(i*3+j)">
                    <img class="media-object img-responsive" style="height: 102px;width: 140px;" v-bind:src="cell.images" alt="道具">
                    <div class="progress">
                        <div class="progress-bar" role="progressbar" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100" v-bind:style="{width: (cell.buy/cell.total)*100 + '%'}"></div>
                    </div>
                    <div class="text-center counter">{{cell.buy}}/{{cell.total}}</div>
                    <div class="amount-buy row">
                        <div class="col-xs-4 div1">
                            <button type="button" class="btn btn-default btn-circle min-buy" @click="min(cell)">-</button>
                        </div>
                        <div class="col-xs-4 div2">{{cell.count}}</div>
                        <div class="col-xs-4 div1">
                            <button type="button" class="btn btn-default btn-circle max-buy" @click="max(cell)">+</button>
                        </div>
                    </div>
                    <button type="button" class="btn btn-default btn-buy" @click="buyDaoJu(cell.id, cell.count)">立即購買</button>
                </div>
            </td>
        </tr>
    </table>
    <!-- /活動(dòng)2 -->

    <div class="row foot">
        <div class="col-xs-12">
            <footer class="footer text-center">
                <p style="color: #fff">最終解釋權(quán)歸遇見所有 &copy; 2017 iAround, Inc.</p>
            </footer>
        </div>
    </div>
</div>
<!-- /container -->

<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/vue.min.js"></script>
<script>
    // 活動(dòng)一部分
    new Vue({
        el: '#activity1',
        data: {
            isBuy1: 0,
            isBuy2: 0,
            isBuy3: 0,
            isBuy4: 0,
            gifts: []
        },
        created() {
            this.request();
        },
        methods: {
            // 買禮包方法
            buyGift: function (id) {
                var self = this;
                // 用戶已購買的,禁止當(dāng)天再次購買
                if (this.gifts[id] == '1') {
                    alert('您當(dāng)天已購買, 不能重復(fù)購買');
                    return;
                } else {
                    if (confirm('是否購買禮物?')) {
                        // 購買打折產(chǎn)品
                        $.ajax({
                            url: 'xxxxx',
                            data: { jobId: id },
                            type: 'POST',
                            success: function (data) {
                                if (data.status == 200) {
                                    alert(data.message);
                                    window.location.reload();
                                } else if (data.status == -100) {
                                    alert(data.errordesc);
                                }
                            }.bind(self)
                        });
                    }
                }
            },
            //獲取用戶購買禮包信息
            request: function () {
                var self = this;
                $.ajax({
                    url: 'xxxxxx',
                    data: { key: 'hello121', uid: 123 },
                    type: 'POST',
                    success: function (data) {
                        if (data.status == 200) {
                            this.gifts = data.info;
                            for (key in this.gifts) {
                                switch (key) {
                                    case '1':
                                        this.isBuy1 = this.gifts[key];
                                        break;
                                    case '2':
                                        this.isBuy2 = this.gifts[key];
                                        break;
                                    case '3':
                                        this.isBuy3 = this.gifts[key];
                                        break;
                                    case '4':
                                        this.isBuy4 = this.gifts[key];
                                    default:
                                        break;
                                }
                            }
                        }
                    }.bind(self)
                });
            }
        },
        computed: {
            isBuy1: function () {
                return this.isBuy1;
            },
            isBuy2: function () {
                return this.isBuy2;
            },
            isBuy3: function () {
                return this.isBuy3;
            },
            isBuy4: function () {
                return this.isBuy4;
            }
        }
    });

    // 活動(dòng)二部分
    new Vue({
        el: '#activity2',
        data: {
            // 道具列表, 道具數(shù)目固定為9個(gè)
            list: []
        },
        created() {
            this.request();
        },
        methods: {
            // 購買數(shù)量減少方法
            min: function (item) {
                if (item.buy > item.total) {
                    item.count--;
                    item.buy--;
                }
            },
            // 購買數(shù)量增加方法
            max: function (item) {
                if (item.buy < item.total) {
                    item.count++;
                    item.buy++;
                }
            },
            request: function () {
                var self = this;
                // 獲取道具數(shù)據(jù)列表
                $.ajax({
                    url: 'xxxxx',
                    data: {},
                    type: 'POST',
                    success: function (data) {
                        if (data.status == 200) {
                            this.list = data.info;
                        }
                    }.bind(self)
                });
            },
            // 購買道具方法
            buyDaoJu: function (jobId, count) {
                var self = this;
                $.ajax({
                    url: 'xxxxxx',
                    data: { jobId: jobId, count: count },
                    type: 'POST',
                    success: function (data) {
                        if (data.status == 200) {
                            alert(data.message);
                        } else {
                            console.log(data);
                        }
                    }.bind(self)
                });
            }
        },
        computed: {
            listDaoJu: function () {
                var list = this.list;
                var arrTemp = [];
                var index = 0;
                var sectionCount = 3;

                for (var i = 0; i < list.length; i++) {
                    index = parseInt(i / sectionCount);
                    if (arrTemp.length <= index) {
                        arrTemp.push([]);
                    }
                    arrTemp[index].push(list[i]);
                }
                return arrTemp;
            }
        },
    });
</script>
</body>

</html>
回答
編輯回答