vue框架使用计算属性、过滤器、方法实现购物车代码

最新推荐文章于 2024-08-08 23:04:40 发布

一只小虾米~~

最新推荐文章于 2024-08-08 23:04:40 发布

阅读量240

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43930256/article/details/127843058

版权

vue框架使用计算属性、过滤器、方法实现购物车代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机购物车页面</title>
    <!-- 引入vue和axios -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>
    <style>
        *{padding: 0px;margin: 0px;list-style: none;}
        #app{
            width: 1000px;
            margin: 30px auto;
        }
        table{
            width: 100%;
            border: 2px solid #ccc;
            border-spacing: 0px;
        }
        thead{
            background-color: blueviolet;
            color: white;
        }
        th,td{
            border: 1px solid #ccc;
            padding: 10px 15px;
            text-align: center;
        }
        tbody img{
            width: 200px;
        }
        tbody td input{
            width: 30px;
            text-align: center;
        }
        #small,#add{
            width: 20px;
            margin: 0px 5px;
        }
    </style>
</head>
<body>
    <div id="app">
        <table>
            <thead>
                <tr>
                    <!-- 使用计算属性控制全选全不选 -->
                    <th><input type="checkbox" v-model="getCheckAll">全选</th>
                    <th>名称</th>
                    <th>图片</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item,index) in goodsList" :key="index">
                    <!-- isCk表示复选框是否被选中 -->
                    <td><input type="checkbox" v-model="item.isCk"></td>
                    <td>{{item.goodsName}}</td>
                    <td><img :src=item.goodsImg alt=""></td>
                    <td>{{item.price}}</td>
                    <td><button id="small" @click="jian(index)" :disabled="item.count<=0?true:false">-</button>
                        <input type="text" :value="item.count" readonly>
                        <button id="add" @click="jia(index)" :disabled="item.count>=item.total?true:false">+</button>
                    </td>
                    <!-- 过滤器使用顺序要合理 -->
                    <td>{{item.price*item.count | priceFilter | RmbFilter}}</td>
                    <td><button id="del" @click="deldata(index)">删除</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="7" style="text-align: left;">
                        总价格：￥{{sum | priceFilter}}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        // 响应式状态值
        data:{
            goodsList:[],
        },
        // 生命周期函数，钩子函数，在整个vue实例数据加载完成的时刻
        created() {
            // 调用函数，将json文件里面的数据添加到goodsList状态值
            this.getGoosList();
        },
        methods: {
            getGoosList(){
                axios.get("./data/goodsList.json")
                .then(res => {
                    console.log(res)
                    this.goodsList = res.data;
                })
                .catch(err => {
                    console.error(err); 
                })
            },
            jian(index){
                this.goodsList[index].count--;
            },
            jia(index) {
                this.goodsList[index].count++;
            },
            deldata(index){
                this.goodsList.splice(index, 1);
            },
        },
        computed: {
            getCheckAll: {
                get:function() {
                    return this.goodsList.length>0 && this.goodsList.every(r=>r.isCk===true);
                },
                set: function(newVal){
                    this.goodsList.forEach((item,index)=>{
                        item.isCk=newVal;
                    })
                }
            },
            sum:{
                // 方法一
                // let sumO=0;
                // this.goodsList.forEach(item=>{
                //     if(item.isCk === true){
                //         sumO+=item.price*item.count;
                //     }
                // })
                // return sumO;
                
                // 方法二
                get: function() {
                    return this.goodsList.filter(item=>{
                        return item.isCk == true;
                    }).map(item=>{
                        return item.price*item.count;
                    }).reduce((total,val)=>{
                        return total+val;
                    },0)
                }
            }
        },
        // 过滤器
        filters: {
            priceFilter(val){
                return val.toFixed(2);
            },
            // 前面加人民币符号
            RmbFilter(val){
                return "￥"+val;
            }
        },
    })
</script>
</html>