Vue实战利用计算属性、指令等开发购物车

最新推荐文章于 2024-04-03 09:02:17 发布

Ivan Cheng

最新推荐文章于 2024-04-03 09:02:17 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/weixin_44970384/article/details/108889833

版权

实战：利用计算属性、指令等知识开发购物车

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车实例</title>
    <script src="vue.js"></script>
    <style>
        [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:left;
        }
        th{
            background: #f7f7f7;
            color:#5c6b77;
            font-weight: 600;
            white-space:nowrap;
        }
    </style>

</head>
<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <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>
        var app = new Vue({
            el:'#app',
            data:{
                list:[
                    {
                        id:1,
                        name:'iPhone11',
                        price:6188,
                        count:1
                    },
                    {
                        id:2,
                        name:'ipad air3',
                        price:3800,
                        count:2

                    },
                    {
                        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>

Ivan Cheng

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Vue实战利用计算属性、指令等开发购物车

实战：利用计算属性、指令等知识开发购物车<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>购物车实例</title> <script src="vue.js
复制链接

扫一扫