Vue.js实战 5.5章 购物车

复制代码
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>购物车示例</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="style.css" rel="stylesheet">
    </head>
    <body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <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="handleRemove(index)">移除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>总价：￥ {{ totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    
    <script>
        var app=new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        id:1,
                        name:'iphone 7',
                        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++;
                },
                //删除
                handleRemove:function(index)
                {
                    this.list.splice(index,1)
                }
            }
        });
    </script>
    </body>
</html>
index.html
复制代码

 

复制代码
[v-cloak]{
    display: none;
}
table{
    border:1px solid #e9e9e9;
    border-collapse: collapse;/* 表格合并边框模型 */
    border-spacing: 0;
    empty-cells: show;/* 显示表格中空单元格上的边框和背景 */
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: center;
}
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: bold;
    white-space: nowrap;/*规定段落中的文本不进行换行：*/
}
style.css
复制代码

 

最终效果：


如果您觉得阅读本文对您有帮助，请点一下“推荐”按钮，您的“推荐”将是我最大的写作动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文连接，否则保留追究法律责任的权利。
posted @   高山-景行  阅读(259)  评论(0)  编辑  收藏  举报
编辑推荐：
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
· ASP.NET Core 模型验证消息的本地化新姿势
阅读排行：
· 从零开始开发一个 MCP Server！
· ThreeJs-16智慧城市项目（重磅以及未来发展ai）
· .NET 原生驾驭 AI 新基建实战系列（一）：向量数据库的应用与畅想
· Ai满嘴顺口溜，想考研？浪费我几个小时
· Browser-use 详细介绍&使用文档
历史上的今天：
2012-10-25 javascript 子页面获取父页面某元素
点击右上角即可分享
微信分享提示