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. 【Excel】将IP按照IP地址（v4）增长序列排序

    Background: Excel列中,有多个net-block, 将这些net-block按照IP地址(v4)自己的大小从小到大排序. Idea: IPv4地址的格式是点分十进制的,也就是说每一个点 ...

  2. BZOJ.3293.[CQOI2011]分金币(思路)

    3293 双倍经验 1045 先考虑能否断环为链.显然是可以的,因为金币不可能在整个环上平移.所以我们枚举断点\(k\),表示\(k\)和\(k+1\)之间不交换金币. 令\(d_i=a_i-aver ...

  3. 一步一步教你从零开始写C语言链表---构建一个链表

      版权声明:本文为博主原创文章,如有需要,请注明转载地址:http://blog.csdn.net/morixinguan.若是侵权用于商业用途,请联系博主,否则将追究责任 https://blog ...

  4. 2017.07.06【NOIP提高组】模拟赛B组

    Summary 今天比赛感觉题目很奇葩,都可以用许多简单方法来做,正确性都显然,当然也有点水,也就是说是考我们的数感和数学知识,而程序,只是代码的体现. 这次的时间安排感觉不错,因为很快就打完最后一道 ...

  5. BeanPostProcessor出现init方法无法被调用Invocation of init method failed

    是因为 返回了null,要返回object即可,arg0是bean对象本身,arg1是bean名字,即bean的id

  6. Egret 获取不到皮肤中的按钮 id

    最近Egret开发中遇到的Q,Egret 获取不到皮肤中的按钮 id,也就没法针对按钮进行监听和执行对应操作: 问题的关键就是,exml获取应该出现了差错: 经过查询我发现this.skinName的 ...

  7. 类对象序列化为json串，json串反序列化为类对象

    1.类对象序列化为json串: 方法一: class P(object): def __init__(self,name,age,sex): self.name=name self.age=age s ...

  8. 多个string数组组装成一个List<Object>

    最近遇到一个问题,数据库里面的数据存了一个多图字段和一个图片对应的排序,然后输出的时候需要按排序处理下. 当然,最容易想到的办法是遍历,然后添加,这次不想玩这么低级的代码,而且类似的需求项目中有好几个 ...

  9. sdn测量论文简介

    Prelude: Ensuring Inter-Domain Loop-Freedom in SDN-Enabled Networks 来源:APNet: The Asia-Pacific Works ...

  10. log4j2发送消息至Kafka

    title: 自定义log4j2发送日志到Kafka tags: log4j2,kafka 为了给公司的大数据平台提供各项目组的日志,而又使各项目组在改动上无感知.做了一番调研后才发现log4j2默认 ...