vue.js

https://cn.vuejs.org/v2/guide/

简单购物车

<html>

<head>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>

        table {

            border: 1px solid black;

        }

        table {

            width: 100%;    border-spacing: 0;

        }

        th {

            background-color: #ddd;

        }

        th,

        td {

            border-bottom: 1px solid #ddd;height: 50px;text-align:center;

        }

        .red {

            color: red

        }

        .green {

            color: green

        }

    </style>

</head>

<body>

    <div id="app">

        <table>

            <tr>

                <th>序号</th>

                <th>商品名称</th>

                <th>商品价格</th>

                <th>购买数量</th>

                <th>操作</th>

            </tr>

            <tr v-for="iphone in PJson">

                <td>{{ iphone.id }}</td>

                <td>{{ iphone.name }}</td>

                <td class="red">￥{{ iphone.price }}</td>

                <td>

                    <button v-bind:disabled="iphone.count == 1" v-on:click="iphone.count-=1" v-bind:class="{green:iphone.count>1,red:iphone.count==1}">-</button>

                    {{ iphone.count }}

                    <button v-bind:disabled="iphone.count == 9" v-on:click="iphone.count+=1" v-bind:class="getBtnClass(iphone.count)">+</button>

                </td>

                <td>

                    <button v-on:click="del($index)">移除</button>

                </td>

            </tr>

        </table>

        <p>

            说明：满100包邮，每个商品限购9件

        </p>

        <p>

            <span class="red">总价：￥{{totalPrice()}}</span>

            <span class="green" v-if="totalPrice()>0" v-show="youfei>0">（含邮费￥{{youfei}}）</span>

            <span class="green" v-show="youfei==0">（包邮）</span>

        </p>

    </div>

    <script>

        var app = new Vue({

            el: '#app',

            data: {

                youfei: 10,

                PJson: [

                    {

                        id: 1,

                        name: 'iphone1',

                        price: 10,

                        count: 1

                    },

                    {

                        id: 2,

                        name: 'iphone2',

                        price: 20,

                        count: 1

                    },

                    {

                        id: 3,

                        name: 'iphone3',

                        price: 30,

                        count: 1

                    }]

            },

            computed: {

                //写在methods里也可以的

                getBtnClass(){

                    return function(num)

                    {

                        return{green:num<9,red:num==9}

                    }

                }

            },

            /*computed: {

                youhui:function(){

                    return 100

                }

            },*/

            methods: {

                del: function (ii) {

                    this.PJson.splice(ii, 1);

                },

                totalPrice: function () {

                    var totalP = 0;

                    for (var i = 0, len = this.PJson.length; i < len; i++) {

                        totalP += this.PJson[i].price * this.PJson[i].count;

                    }

                    if (totalP >= 100) {

                        this.youfei = 0

                    } else {

                        this.youfei = 10

                    }

                    if (totalP > 0) {

                        return totalP + this.youfei;

                    }

                    return 0;

                },

                getBtnClass2:function(num)

                {

                    return{green:num<9,red:num==9}

                }

            }

        })</script>

</body>

</html>

vue.js购物车的更多相关文章

  1. vue.js移动端app实战3：从一个购物车入门vuex

    什么是vuex? 官方的解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 简单来说就 ...

  2. vue.js实战——升级版购物车

    HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  3. vue.js实战——购物车练习（包含全选功能）

    vue.js实战第5章 54页的练习1 直接放代码好了,全选的部分搞了好久,代码好像有点啰嗦,好在实现功能了(*^▽^*) HTML: <!DOCTYPE html> <html l ...

  4. 非node环境下的vue.js 实现简单的购物车计算功能 样式请无视

    都说vue的双向数据绑定好用,自己用了下,感觉做购物车没想象中好用.自己的实现如下: <!DOCTYPE html> <html lang="en"> &l ...

  5. vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  6. 用vue.js实现购物车功能

    购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新. 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3 ...

  7. 窥探Vue.js 2.0

    title: 窥探Vue.js2.0 date: 2016-09-27 10:22:34 tags: vue category: 技术总结 --- 窥探Vue.js2.0 令人兴奋的Vue.js 2. ...

  8. vue.js+boostrap最佳实践

    一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...

  9. vue.js+boostrap

    vue.js+boostrap最佳实践 一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostr ...

随机推荐

  1. Vue项目初始

    利用npm搭建Vue项目流程 安装 第一步: 官方下载node 或者pip install node 第二步:可忽略 :  npm install npm@latest -g 更新最新的稳定版本 第三 ...

  2. Android事件分发流程总结

    Action_Down 当按下一个控件,调用流程是Activity.dispatchTouchEvent -> ViewGroup.dispatchTouchEvent , 1.ViewGrou ...

  3. Nginx 反向代理 -- 一路上的坑

    前些天刚过来新公司上班,公司的项目都挺多的,只不过项目都是第三方公司团队开发的,现在本公司要组建自己的团队,我作为一个Java后台人员去接手第三方公司的全部项目,我已经是直接崩溃了(先解释一下我崩溃的 ...

  4. Good Bye 2018 (A~F, H)

    目录 Codeforces 1091 A.New Year and the Christmas Ornament B.New Year and the Treasure Geolocation C.N ...

  5. Charles通用破解激活办法

    Charles通用破解激活办法 适用于Charles任意版本的注册码,谁还会想要使用破解版呢. 目前最新版Charles 4.2.8. Registered Name: https://zhile.i ...

  6. Java中Reflect的基本使用

    首先在package reflect下定义了一个类Book package reflect; class Book{ private String title; private double pric ...

  7. angularJs中怎么模拟jQuery中的this？

    最近自己正在学习angularJs,在学到ng-click时,由于想获取当前点击元素的自身,开始想到了用$index来获取当前元素的索引同样能实现我想要的效果,但是在有些特殊的情况下,使用$index ...

  8. hdu2955 Robberies(背包)

    https://vjudge.net/problem/HDU-2955 概率是浮点数,只能做值(而且这里是累乘,也不能化成整数),这里注意要化成安全概率(1-p[i]),求安全概率的最大值. 钱数作二 ...

  9. javascript——10章 DOM

    1.节点关系 (1)childNodes:返回节点的子节点集合 返回值:NodeList 对象,表示节点集合. 注:childNodes只能取到子级,不能取到子级的子级. childNodes所有节点 ...

  10. ngClass指令3种使用

    CSS代码:1 .strike { text-decoration: line-through; } .bold { font-weight: bold; } .red { color: red; } ...