Vue.js computed练习——计算购物车总价;手机正常查看网站

再title后添加相关设置可在手机上正常显示
直接引用即可；
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<div id="app">
            <div class="container">
                <div class="item" v-for="goods in goodsList">
                    <div class="item-id">
                        {{goods.id}}
                    </div>
                    <div class="item-name">
                        <a :href="goods.url" class="item-url">
                        {{goods.name}}
                        </a>
                    </div>
                    <div class="item-img">
                        <a :href="goods.url" class="item-url">
                            <img :src="goods.imgUrl">
                        </a>
                    </div>
                    <div class="item-price">
                        {{goods.price}}<i class="icon-renminbi"></i>
                    </div>
                    <div class="item-count">
                        <button class="btn1" type="button" @click="goods.count-=1" :disabled="goods.count === 0">-</button>
                        <input type="text" class="goods-count" v-model="goods.count" />
                        <button class="btn2" type="button" @click="goods.count+=1">+</button>
                    </div>
                </div>
                <hr>
                <div class="settlement">
                    <h3>总价：￥{{totalPrice}}</h3>
                    <span><button type="button" class="btn" @click="settlement()"><i class="icon-shopping-cart"></i>&nbsp;&nbsp;&nbsp;结算</button></span>
                </div>
                <div class="result" v-if="show">
                    你购买了{{settlement}}件商品，需要支付总价为：{{totalPrice}}元
                </div>
            </div>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data: {
                    goodsList: [{
                            id: 1,
                            name: 'iPhone 8',
                            imgUrl: 'img/iPhone8.jpg',
                            price: 6000,
                            count: 1,
                            url:'https://www.amazon.cn/dp/B075L8WKNC/ref=sr_1_1?s=wireless&ie=UTF8&qid=1552459405&sr=1-1&keywords=iphone8'
                        },
                        {
                            id: 2,
                            name: 'iPhone X',
                            imgUrl: 'img/iPhoneX.jpg',
                            price: 7000,
                            count: 1,
                            url:'https://www.amazon.cn/dp/B075L9T8HF/ref=sr_1_1?s=wireless&ie=UTF8&qid=1552459383&sr=1-1'
                        },
                        {
                            id: 3,
                            name: 'iPhone xs Max',
                            imgUrl: 'img/iPhoneXS.jpg',
                            price: 8000,
                            count: 1,
                            url:'https://www.amazon.cn/dp/B07HBZL9G1/ref=sr_1_4?s=wireless&ie=UTF8&qid=1552459383&sr=1-4&th=1'
                        }
                    ],
                    show: false
                },
                methods: {},
                computed: {
                    totalPrice: function() {
                        var totalPrice = 0;
                        var len = this.goodsList.length;
                        for (var i = 0; i < len; i++) {
                            totalPrice += this.goodsList[i].price * this.goodsList[i].count;
                        }
                        return totalPrice;
                    },
                    settlement: function() {
                        this.show = true;
                        var totalCount = 0;
                        var len = this.goodsList.length;
                        for (var i = 0; i < len; i++) {
                            totalCount += this.goodsList[i].count;
                        }
                        return totalCount;
                    }
                }
            })

手机正常进入网站

ctrl+r -> cmd -> ipconfig 查看电脑的ip地址
2.替换红框中地址

2.png

3.复制替换后完整代码之图中 1 位置，点击 2 位置获取网址对应二维码手机扫描即可。

3.png

（电脑须连接手机热点）

效果png

最后编辑于：2019.03.13 21:25:05