vue.js实战实现购物车的单选全选--第五章购物车练习(一)

最新推荐文章于 2024-07-16 16:33:57 发布

Clara_G

最新推荐文章于 2024-07-16 16:33:57 发布

阅读量3.8k

点赞数 3

分类专栏：前端 vue js 文章标签： vue.js 购物车

本文链接：https://blog.csdn.net/Clara_G/article/details/89840289

版权

本文介绍了使用Vue.js实现购物车功能的实战练习，包括添加商品选中状态，计算选中商品总价及全选按钮。通过在HTML中添加状态字段和JS事件绑定，实现了商品的选中逻辑，只有选中的商品才会被计入总价。

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

本例介绍《vue.js实战》第五章最后的购物车练习一,

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

截图如下:

html:

 <div id="app" v-cloak>
    <template v-if="list.length">
      <table>
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="isAllChecked" @click="checkAll()">
            </th>
            <th>序号</th>
            <th>商品名称</th>
            <th>商品单价</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in list" :key="index">