（VueJs）实现一个简单的购物车

最新推荐文章于 2024-06-13 07:27:27 发布

黑胡子大叔的小屋

最新推荐文章于 2024-06-13 07:27:27 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lzl980111/article/details/104734192

版权

前端专栏收录该内容

75 篇文章 0 订阅

订阅专栏

在这里插入图片描述
Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
<div id="app">
    <div v-if="books.length">
    <table>
        <thead>
            <tr>
                <th></th>
                <th>书籍名称</th>
                <th>出版日期</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
        </thead>
            <tr v-for="(item,index) in books">
                <td>{{item.id}}</td>
                <td>{{item.bookname}}</td>
                <td>{{item.pubdate}}</td>
                <td>{{item.price | showPrice}}</td>
                <td>
<!--        v-bind:disabled="item.count<=1"当为true时控件可以进行交互，当为false时边不能交互了             -->
                    <button @click="decrement(index)" v-bind:disabled="item.count<=1">-</button>
                    {{item.count}}
                    <button @click="increment(index)" >+</button>
                </td>
                <td><button @click="del(index)">移除</button></td>
            </tr>
        <tbody></tbody>
    </table>
    <h2>总价格：{{sum}}</h2>
    </div>
    <h2 v-else>购物车为空</h2>
</div>
<script src="../../js/vue.js"></script>
<script src="demo.js"></script>
</body>
</html>

const app=new Vue({
    el:'#app',
    data:{
        books:[
            {id:1,bookname:'计算机网络',pubdate:'2006-9',price:15.00,count:1},
            {id:2,bookname:'操作系统',pubdate:'2016-9',price:20.00,count:1},
            {id:3,bookname:'JavaSE程序设计',pubdate:'2012-9',price:35.00,count:1},
            {id:4,bookname:'PHP程序设计',pubdate:'2010-9',price:42.00,count:1},
        ]
    },
    methods:{
        increment(index){
            console.log('---------increment'+index)
            this.books[index].count++;
        },
        decrement(index){
            //if (this.books[index].count==0) return;
            console.log('---------decrement'+index)
            this.books[index].count--;
        },
        del(index){
            this.books.splice(index,1);
        }
    },
    filters:{
        showPrice(price){
            return '￥'+price.toFixed(2)
        }
    },
    computed:{
        sum:{
            get(){
                let sum=0;
                for (let book of this.books){
                    sum+=book.count*book.price;
                }
                return sum+'￥';
            }
        }
    }
})

css

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
}

th, td{
    padding: 8px 16px;
    border:1px solid #e9e9e9;
    text-align: left;
}

th{
    background-color: #f7f7f7;
    color: #5c6b77;
    font-weight:600;
}

运行效果：
在这里插入图片描述

黑胡子大叔的小屋

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
（VueJs）实现一个简单的购物车

Html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="demo.css"></head>&l...
复制链接

扫一扫