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. bootstrap图片轮播

    <div class="carousel slide" id="myCarsousel" style="width:790px;"&g ...

  2. IDEA中的常用设置

    ps:对于开发工具,不同的开发人员有不同的设置喜好,这里介绍的是我个人的配置,不喜勿喷. Appearance:个人喜欢全黑主题,雅黑字体 背景图片, 效果如下,编写代码的时候有个自己喜欢的背景图片, ...

  3. CentOs中玩docker

    1.启动: systemctl start docker.service 2.停止: systemctl stop docker 3.从usts上拉取仓库 编辑文件 vi /etc/docker/da ...

  4. CSS-三角形及其原理

    CSS中三角形在网页中比较常见,以前是图片,不过现在基本上都是通过CSS可以完成,实现比较简单,我们可以看一组简单的三角形效果: 其实实现起来比较简单,通过空div然后设置宽高为0,之后可以四周bor ...

  5. 摆脱CSS浏览器私有属性-moz， -ms， -webkit

    为了兼容各个浏览器之间的私有属性,前端开发人员在写css的时候需要给一些css属性添加多个私有前缀,非常麻烦.这里给大家分享一个简单的方法可以让你以后无需手动给CSS添加私有属性. -moz代表fir ...

  6. svn window下过滤文件（如配置文件等）

    第一种: 在资源管理器中,右键一个未加入版本控制文件或目录,并从弹出菜单选择TortoiseSVN →Add to Ignore List,会出现一个子菜单,允许你仅选择该文件或者所有具有相同后缀的文 ...

  7. 游历校园 [COGS 614] [欧拉图]

    Description 刷完牙洗完脸,黄黄同学就要上课去了.可是黄黄同学每次去上课时总喜欢把校园里面的每条路都走一遍,当然,黄黄同学想每条路也只走一遍.我们一般人很可能对一些地图是办不到每条路走一遍且 ...

  8. Java爬取校内论坛新帖

    Java爬取校内论坛新帖 为了保持消息灵通,博主没事会上上校内论坛看看新帖,作为爬虫爱好者,博主萌生了写个爬虫自动下载的想法. 嗯,这次就选Java. 第三方库准备 Jsoup Jsoup是一款比较好 ...

  9. java基础知识总结--继承和接口

    什么是继承?什么是接口?他们之间的区别和联系是什么? 什么是继承? 继承是使用已存在的类的定义作为基础建立新类的技术,新类的定义可以增加新的数据或新的功能,也可以用父类的功能.多个类中存在相同属性和行 ...

  10. centos7.4 python3.6 Anaconda3 的下安装tensorflow

    参考这个博客 https://blog.csdn.net/learn_tech/article/details/79861683 在anaconda环境下,安装tensorflow 2018年04月0 ...