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. Pandas 学习记录(一)

    1.DataFrame 按照列和按照行进行索引数据 按照列索引 df[’column_name’] 按照行索引 df.loc[’row_key’] 或 df.iloc[index] 2.先行后列索引单 ...

  2. Vue实现用户自定义上传头像裁剪

    使用技术: vue.js2.0.cropperjs.canvas <template>   <div id="app">     <div id=&q ...

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

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

  4. BZOJ.4513.[SDOI2016]储能表(数位DP)

    BZOJ 洛谷 切了一道简单的数位DP,终于有些没白做题的感觉了...(然而mjt更强没做过这类的题也切了orz) 看部分分,如果\(k=0\),就是求\(\sum_{i=0}^n\sum_{j=0} ...

  5. [PA2014]Muzeum

    [PA2014]Muzeum 题目大意: 有\(n\)件展品和\(m\)个警卫,每件展品有一个坐标\((x_i,y_i)\)和价值\(v_i\),每个警卫的坐标为\((x_i,y_i)\).每个警卫面 ...

  6. 第一本docker书，，持续更新中

    1.查看应用是否在docker中部署成功 需要确认curl已安装 whereis curl sudo apt-get -y install curl curl localhost:8081   如果成 ...

  7. 深入理解FM和FFM

    公司主要用这两个模型来进行广告预测. http://geek.csdn.net/news/detail/59793 FM主要是处理在onehot之后,矩阵稀疏的问题. 在引入fm之后,能够更好的处理特 ...

  8. std::string 用法总结

    标准C++中的string类的用法总结 相信使用过MFC编程的朋友对CString这个类的印象应该非常深刻吧?的确,MFC中的CString类使用起来真的非常的方便好用.但是如果离开了MFC框架,还有 ...

  9. Ubuntu或linux 运行后台进程运行不挂断的办法

    nohup python ChatReq.py 20000 >>log_cronjob.txt 2>&1 & 之前把nohup去掉,发现就算运行python Chat ...

  10. 深入理解javascript构造函数和原型对象

    ---恢复内容开始--- 对象,是javascript中非常重要的一个梗,是否能透彻的理解它直接关系到你对整个javascript体系的基础理解,说白了,javascript就是一群对象在搅..(哔! ...