Vue3使用组件的计算属性设计购物车效果

商城网站中经常需要设计购物车效果。购物车页面中会显示商品名称、商品单价、商品数量、单项商品的合计价格，最后会有一个购物车中所有商品的总价。
【例3.17】使用计算属性设计购物车效果（源代码\ch03\3.17.html）。

复制代码

<div id="app">
    <div>
        <div>
            <h3 align="center">商品购物车</h3>
        </div>
        <div>
            <div>
                <label>
                    <input type="checkbox" v-model="checkAll">
                    全选
                </label>
                <label>
                    <input type="checkbox" v-model="checkNo">
                    反选
                </label>
            </div>
            <ul>
                <li v-for="(item,index) in list" :key="item.id">
                    <div>
                        <label>
                            <input type="checkbox" v-model="item.checked">
                            {{item.name}}
                        </label>
                        ¥ {{item.price}}
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <button type="button"  @click="item.nums>1? item.nums-=1:1">-</button>
                        数量：{{item.nums}}
                        <button type="button"  @click="item.nums+=1">+ </button>
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        小计：{{item.nums*item.price}}
                    </div>
                 </li>
            </ul>
            <p align="right">总价：{{sumPrice}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;<button type="button"  @click="save" >提交订单</button></p>
        </div>
    </div>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
             list: [{
                        id: 1,
                        name: '洗衣机',
                        checked: true,
                        price: 6800,
                        nums: 1,
                    },
                    {
                        id: 2,
                        name: '电视机',
                        checked: true,
                        price: 4900,
                        nums: 1,
                    },
                    {
                        id: 3,
                        name: '饮水机',
                        checked: true,
                        price: 1000,
                        nums: 3,
                    },
                ],
            }
           },
        computed: {
                    //全选
                checkAll: {
                    // 设置值，当勾先"全选"按钮的时候触发
                    set(v) {
                        this.list.forEach(item => {
                            item.checked = v
                        });
                    },
                    // 取值，当列表中的选择改变之后触发
                    get() {
                        return this.list.length === this.list.filter(item => item.checked == true).length;
                    },
                },
                //反选
                checkNo: {
                    set() {
                        this.list.forEach(item => {
                            item.checked = !item.checked;
                        });
                    },
                    get() {
                        // return this.list.length === this.list.filter(item => item.checked == true).length;
                    },
                },
                // 总价计算
                sumPrice() {
                    return this.list
                        .filter(item => item.checked)
                        /* reduce*******************************
                        arr.reduce(function (prev, cur, index, arr) {
                            ...
                        }, init);
                        arr 表示原数组；
                        prev 表示上一次调用回调时的返回值，或者初始值 init;
                        cur 表示当前正在处理的数组元素；
                        index 表示当前正在处理的数组元素的索引，若提供init值，则索引为0，否则索引为1；
                        init表示初始值。
                        常用的参数只有两个：prev和cur,求数组项之和
                        var sum = arr.reduce(function (prev, cur) {
                            return prev + cur;
                        }, 0); */
                        .reduce((pre, cur) => {
                            return pre + cur.nums * cur.price;
                        }, 0);
                },
            },
            methods: {
                save() {
                    console.log(this.list.filter(item =>
                        item.checked
                    ));
                }
            },
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序，选择不同的商品，并设置商品的数量后，结果如图3-20 所示。

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。