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. linux学习笔记 ftp命令

    ftp server with sites et up for downloaing files sometimes provides an anonymous ftp account 数据传输 ft ...

  2. python Event对象、队列和多进程基础

    Event对象 用于线程间通信,即程序中的其一个线程需要通过判断某个线程的状态来确定自己下一步的操作,就用到了event对象 event对象默认为假(Flase),即遇到event对象在等待就阻塞线程 ...

  3. 关于visual assist x插件不能用的解决方案

    打開VS莫名其妙地彈出下面的錯誤框: "the security key for this program currently stored on your system does not ...

  4. BZOJ.1071.[SCOI2007]组队(思路)

    题目链接 三个限制: \(Ah-AminH+Bv-BminV\leq C\ \to\ Ah+Bv\leq C+AminH+BminV\) \(v\geq minV\) \(h\geq minH\) 记 ...

  5. 【ACM】 1231 最大连续子序列

    [1231 最大连续子序列 ** Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) To ...

  6. C语言实现密码修改

    /* *修改密码 *描述: *1.本来已经存在密码 *2.很多时候需要输入两次密码,对比是否正确,才能确认修改密码正确 *敲代码思路: *1.输入旧的密码判断是否正确 *2.提示输入修改后的密码 *3 ...

  7. MongoError: Cannot update '__v' and '__v' at the same time,错误解决办法

    1.讲查询的结果,原封不动的插入到另一个表中,结果报错了:MongoError: Cannot update '__v' and '__v' at the same time,起初认为是mongodb ...

  8. VUE学习第一天，安装

    vue生命周期好文章: http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html

  9. [CTSC2017]吉夫特

    Description: 给定一个序列\(a_1,a_2,a_3...a_n\) 求有多少个不上升子序列: \(a_{b1},a_{b_2}...\) 满足 \(C_{a_{b1}}^{a_{b2}} ...

  10. python系统编程（六）

    threading注意点 1. 线程执行代码的封装 通过上一小节,能够看出,通过使用threading模块能完成多任务的程序开发,为了让每个线程的封装性更完美,所以使用threading模块时,往往会 ...