《Vuejs实战》--带单选，全选，总价，分类的购物车功能实现

最新推荐文章于 2024-07-06 18:15:35 发布

yipanhuasheng

最新推荐文章于 2024-07-06 18:15:35 发布

阅读量4.8k

点赞数 5

文章标签： vuejs实战 vue 购物车全选分类

本文链接：https://blog.csdn.net/yipanhuasheng/article/details/82732105

版权

本文介绍《Vuejs实战》中的购物车功能实现，包括商品的单选、全选、总价计算以及商品分类。通过v-model绑定实现商品选中状态，使用计算属性处理总价，使用二维数组实现商品分类。同时，讨论了如何处理全选按钮的状态，并提供了相关代码示例，适合Vuejs初学者参考学习。

摘要由CSDN通过智能技术生成

《vuejs实战》这本书中5.5是一道实战题：利用计算属性、指令等知识开发购物车。

练习1：在当前示例基础上扩展商品列表，新增一项是否选中该商品的功能，总价变为只计算选中商品的总价，同时提供一个全选的按钮。

练习2：将商品列表list改为一个二维数组来实现商品的分类，比如可分为“电子产品” “生活用品” 和“果蔬”，同类商品聚合在一起。提示，你可能会用到两次v-for。

练习一：html

<body>
    <div id="app" v-cloak>
        <template v-if="list.length">
            <table>
                <thead>
                    <tr>
                        <th></th>
                        <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)" :disable="item.count === 1">-</button>
                            {
  { item.count }}
                            <button @click="handleAdd(index)">+</button>
                        </td>
                        <td>
                            <button @click="handleRemove(index)">移除</button>
                        </td>
                        <td>
                            <input type="checkbox" :value="item.id" v-model="checkBoxModel" @click.stop="pickOne(index),checkPick()">
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>全选</td>
                        <td>
                            <input type="checkbox" @click="allPick(),checkModel()" v-model="allp">
                        </td>
                    </tr>
                </tbody>
            </table>
            <div>{
  { checkBoxModel }}</div>
            <div>总价：￥{
  { totalPrice }}</div>
        </template>
        <div v-else>购物车为空</div>
    </div>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="index1.js"></script>
</body>

练习一、二:css