Vue 实现购物车案例

weixin_45703831

已于 2024-05-26 19:10:41 修改

阅读量147

点赞数 3

分类专栏：案例实现文章标签： vue.js javascript 前端

于 2024-05-20 21:20:15 首次发布

本文链接：https://blog.csdn.net/weixin_45703831/article/details/139075253

版权

案例实现专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<style>
    table,tr,th,td{
        border: 1px solid black;
    }
    table{
        border-collapse: collapse;
    }
    td,th{
        padding: 10px;
    }
</style>
<body>
    <!-- v-for指令使用场景：凡是出现重复性的内容/标签时，就可以用v-for指令实现 -->
    <div id="app">
        <table>
            <tr>
                <th v-for="item,index in title" :key="index">{{item}}</th>
            </tr>
            <tr v-for="item,index in books">
                <td>{{index}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date}}</td>
                <td>￥{{item.price}}.00</td>
                <td>
                    <button @click="addMin(index,-1)">-</button>
                    {{item.num}}
                    <button @click="addMin(index,1)">+</button>
                </td>
                <td>
                    <button @click="del(index)">移除</button>
                </td>
            </tr>
            <tr>
                <td colspan="6" style="text-align: right;">总价为：{{total}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        // data 里面定义的是静态变量
        data:{
            title:['编号','书籍名称','出版日期','价格','数量','操作'],
            books:[
                {
                    name:'算法导论',
                    date:'2006-9',
                    price:85,
                    num:1
                },
                {
                    name:'UNIX编程艺术',
                    date:'2006-9',
                    price:85,
                    num:1
                },
                {
                    name:'Vue程序设计',
                    date:'2006-9',
                    price:85,
                    num:1
                }
            ]
        },
        // methods 里面定义的是方法、函数
        methods:{
            // 加减功能
            addMin(i,val){
                if(val == -1 && this.books[i].num == 1){
                    return
                }
                this.books[i].num +=val
            },

            // 移除功能
            del(i){
                // 首先将要移除具体哪一项元素的索引值告诉del这个方法，使用i接收
                this.books.splice(i,1)
            }
        },
        // computed ：假设一个值会因为其他的变化而变化，则定义在这里
        computed:{
            total(){
                var ret = this.books.reduce((pre,item)=>{
                    // pre 表示的是上次的结果
                    // item 表示的是每一项元素

                    // 第一次遍历：0 +85 * 1 = 85（这个85赋值给下一次遍历的pre）
                    // 第二次遍历：85 + 85 * 1 = 170
                    // 第三次遍历：170 + 85 * 1 = 255
                    // 最终结果是：255，这个值赋值给：ret
                 return  pre + item.price * item.num
                },0)
                // 要把ret暴露到外面去，才可以直接调用这方法
                // 想要什么结果，就 return 什么样子,xx.toFixed(2)表示保留两位小数点
                return "￥"+ret.toFixed(2)
            }
            
        }
    })
</script>
</html>