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

本例介绍《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">
            <td>
              <input type="checkbox" :value="item.id" v-model="item.isCheck