Vue 购物车实例

最新推荐文章于 2023-11-01 15:15:53 发布

秦时明月今何在

最新推荐文章于 2023-11-01 15:15:53 发布

阅读量283

点赞数

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_22042857/article/details/91320170

版权

vue 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

刚开始学习Vue,个人感觉Vue和Jquery最大的区别是Vue由数据驱动，封装了DOM操作。

贴上写的购物车小实例

Html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-if="list.length">
        <!-- <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>
        </div>
        <!-- </template> -->
        <div v-else>购物车为空</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="index.js"></script>
</body>
</html>

JS代码

var vue = new Vue({
    el:"#app",
    data:{
        list:[
            {
                id:1,
                name:"IPhone 7",
                price:6888,
                count:1
            },{
                id:2,
                name:"iPad Pro",
                price:5888,
                count:1
            },{
                id:3,
                name:"MacBook Pro",
                price:24888,
                count:1
            }
        ]

    },
    computed:{
        totalPrice:function(){
            var total = 0;
            for(var i = 0; i < this.list.length; i++){
                var item = this.list[i];
                total = 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);
        }
    }
})

秦时明月今何在

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 购物车实例

刚开始学习Vue,个人感觉Vue和Jquery最大的区别是Vue由数据驱动，封装了DOM操作。贴上写的购物车小实例Html 代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="...
复制链接

扫一扫