专栏首页Spring相关Vue实战之建立购物车

Vue实战之建立购物车

Vue实战之建立购物车

1.效果演示:

cart.gif

2.相关代码:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车示例</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>

<div id="app" v-cloak>
    <template v-if="list.length">
        <table border="1px" style="border-collapse:collapse;">
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in list">
                <td>{{index+1}}</td>
                <td>{{item.name}}</td>
                <td>{{item.price}}</td>
                <td>
                    <button @click="handleReduce(index)"
                            :disabled="item.count ===1"
                    >-
                    </button>
                    {{item.count}}
                    <button @click="handleAdd(index)">+</button>
                </td>
                <td>
                    <button @click="handdleRemove(index)">移除</button>
                </td>
            </tr>
            </tbody>
        </table>
        <div>总价:&yen;{{totalPrice}}</div>
    </template>
    <div v-else>购物车为空</div>
</div>


<script src="../js/vue.js"></script>
<script src="../js/index.js"></script>
</body>
</html>

index.js:

/**
 * Created by Administrator on 2018/10/17 0017.
 */

var app = new Vue({

    el: "#app",
    data: {
        list: [
            {
                id: 1,
                name: 'iPhone7',
                price: 6188,
                count: 1
            },
            {
                id: 2,
                name: 'iPad Pro',
                price: 5888,
                count: 1
            },
            {
                id: 3,
                name: 'MacBook Pro',
                price: 21488,
                count: 1
            }
        ]
    },
    computed: {
        totalPrice:function () {
            var total = 0;
            for (var i=0;i<this.list.length;i++){
                var item = this.list[i];
                total += item.price*item.count;
            }
            return total.toString().replace(
                /\B(?=(\d{3})+$)/g,","
            );
        }
    },
    methods: {
        handleReduce:function (index) {
            if(this.list[index].count===1){
                return;
            }
            this.list[index].count --;
            
        },
        handleAdd:function (index) {
            this.list[index].count ++;

        },
        handdleRemove:function (index) {
            this.list.splice(index,1);
        }

    }
});

style.css:

[v-cloak]{
    display: none;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Springboot用官方建议访问Html页面并接传值

    我们以前通常习惯用webapp来放置jsp页面,但是到了Springboot中,官方建议用Static文件夹来存放及静态的资源,

    Dream城堡
  • thymeleaf的th:each常见用法

    Dream城堡
  • Spring Boot遇到的某些问题

    因为项目要访问本地硬盘的文件所以要去Tomcat的server.xml里配置Context ,

    Dream城堡
  • cssjshtml vue.js利用计算属性、指令开发购物车

    葫芦
  • pyCharm最新2017激活码

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/...

    shaonbean
  • NodeJs —— 在Visual Studio中开发C++插件之环境配置

         最新版地址:  https://www.nasm.us/pub/nasm/releasebuilds/2.13.03/

    strawberry
  • Cyber Physical Systems将颠覆工业和能源行业

    大数据文摘
  • Linux学习12-ab报错apr_pollset_poll

    使用ab压力测试时候出现报错apr_pollset_poll: The timeout specified has expired (70007),本篇总结了几...

    上海-悠悠
  • 任总接受央视采访:不要煽动民族情绪

    此值多事之秋,关于老美各种针对打压华为的消息,简直是燃爆了国内外,具体情况,这里就不多说了,不清楚可以去网上了解下。

    良月柒
  • 黑客利用SSH弱密码攻击控制Linux服务器,潜在目标约十万IP天

    本周腾讯安全服务中心接到客户求助,客户部署的腾讯御界高级威胁检测系统发现SSH服务失陷感知信息,该公司安全管理人员及时联络腾讯安全专家协助分析威胁来源。

    FB客服

扫码关注云+社区

领取腾讯云代金券