用vue框架编写购物车简单代码（案例）

最新推荐文章于 2024-07-24 17:38:44 发布

HebyH_

最新推荐文章于 2024-07-24 17:38:44 发布

阅读量708

点赞数

文章标签： html5 vue.js css

本文链接：https://blog.csdn.net/m0_45159572/article/details/117988364

版权

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link rel="stylesheet" href="style.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>
        <tbody>
        <tr v-for="(item,index) in books">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.data}}</td>
            <td>{{item.price| showPrice}}</td>
            <!--vue里保存两位小数：1.item.price.toFixed(2)
                    2.在main.js内弄个方法:getFinalPrice
                    3.在main.js放过滤器filters：{showPrice（price）}
                    html:{item.price| showPrice-->
            <td>
                <button @click="decrement(index)" 
                 v-bind:disabled="item.count<=1">-</button>
                {{item.count}}
                <button @click="increment(index)">+</button>
            </td>
            <td>
                <button @click="remove(index)" >移除</button>
            </td>
        </tr>
        </tbody>
    </table>
    <h2>总价格{{totalPrice | showPrice}}</h2>
</div>
<h2 v-else>购物车为空</h2>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="main.js"></script>

</body>
</html>

CSS代码：

table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0px;
    text-align: center;
}
th,td{
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: center;

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

JS代码：

const app=new Vue({
    el:'#app',
    data:{
        books:[
            {
                id:1,
                name:'《算法导论》',
                data:'2006-9',
                price:85.00,
                count:1
            },
            {
                id:2,
                name:'《加勒比海盗》',
                data:'2016-9',
                price:25.00,
                count:1
            },
            {
                id:3,
                name:'《哈利波特》',
                data:'2003-6',
                price:125.00,
                count:1
            },
            {
                id:4,
                name:'《小妇人》',
                data:'1992-9',
                price:29.00,
                count:1
            }
        ]
    },
    methods: {
        // getFinalPrice(price){
        //     return'￥'+price.toFixed(2)
        // },

        decrement(index){
            this.books[index].count--
        },
        increment(index){
            this.books[index].count++
        },
        remove(index){
            this.books.splice(index,1)
        },

    },
    filters: {
        showPrice(price) {
            return '￥' + price.toFixed(2)
        }
    },
    computed:{
        totalPrice(){
            let  totalPrice=0
            for(let i=0;i<this.books.length;i++){
                totalPrice +=this.books[i].price*this.books[i].count
            }
            return totalPrice
        }
    }

})

HebyH_

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
用vue框架编写购物车简单代码（案例）

HTML代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css"></head><body><div id="app"> <div v-if="boo
复制链接

扫一扫