Vue基础案例：01-购物车：购买图书-前端开发

效果点击增加数量，总价格随之改变数量为1时，减少数量按钮无法被点击移除按钮将此书籍从表单移除，并且总价格变化移除全部书后，隐藏表单，只显示：购物车为空!DOCTYPE htmlhtml lang=enheadmeta cha...
效果

点击增加数量，总价格随之改变
数量为1时，减少数量按钮无法被点击
移除按钮将此书籍从表单移除，并且总价格变化
移除全部书后，隐藏表单，只显示：购物车为空
<!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>Document</title>
  <style>
    /* 总组，字体大小 */
    .zu {
      font-size: 26px;
    }

    /* 合并单元格框 */
    table {
      border-collapse: collapse;
    }

    /* 表头 */
    th {
      border: #cccccc solid 2px;
      height: 60px;
      background-color: #e6e6e6;
    }

    /* 内容单元格 */
    tbody tr td {
      height: 50px;
      border: #cccccc solid 2px;
      text-align: center;
    }

    /* 移除按钮 */
    .btnhandle {
      width: 60px;
      height: 30px;
    }

    /* 按钮大小 */
    button {
      width: 30px;
      height: 30px;
    }

    /* 设置每个列的宽度 */
    .xuhao {
      width: 60px;
    }

    .xuhao2 {
      width: 300px;
    }

    .xuhao3 {
      width: 150px;
    }

    .xuhao4 {
      width: 150px;
    }

    .xuhao5 {
      width: 150px;
    }

    .xuhao6 {
      width: 100px;
    }
  </style>
</head>

<body>
  <!-- 
    步骤：
    1.制作表头固定内容表格（thead），调整css样式
    2.先动态的创建行（遍历创建v-for），同时手动创建对应数量的td（不使用遍历创建的原因：遍历之后设置价格样式、计算总价、按钮的创建都很麻烦）
    3.动态的从数组获取信息，填入td中（mustache写法提取数组中对象的属性值）
    4.完事表格（按钮补充、按钮内容、小数点保留后两位（.tofixed）、
    5.此时表格创建完毕，信息填入完毕
    6.给购买数量按钮绑定点击事件：@click/   （按钮不可用状态判断）
    7.移除按钮绑定点击事件：splice删除（当移除全部书籍后，隐藏界面，显示：购物车为空）
    8.计算总价格：先计算出每类书籍总价格，最后求和。+=
    
   -->
  <div class="zu">
    <div v-if='books.length'>
      <!-- 判断书籍数量，当存在书籍时显示下列信息，反之 -->
      <table>
        <thead>
          <tr class="head">
            <th></th>
            <th>名称</th>
            <th>出版日期</th>
            <th>价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr class="firsttr" v-for='(item,index) in books'>
            <td class="xuhao">{{item.id}}</td>
            <td class="xuhao2">{{item.bname}}</td>
            <td class="xuhao3">{{item.date}}</td>
            <td class="xuhao4">{{getPrice(item.price)}}</td>
            <td class="xuhao5">
              <button class="reduce" @click='reduceNum(index)'
                :disabled='item.num<=1'>-</button><span>{{item.num}}</span><button class="add"
                @click='addNum(index)'>+</button>
            </td>
            <td class="xuhao6"><button class="btnhandle" @click='removeBtn(index)'>{{item.handle}}</button></td>
          </tr>
        </tbody>
      </table>
      <div class="total">
        <div>总价格为：{{addPrice}}</div>
      </div>
    </div>
    <!-- 当删除所有的书籍时，隐藏全部，显示下列内容 -->
    <div v-else>购物车为空</div>
  </div>


  <!--  -->
  <script src="./js文件/vue.js"></script>
  <script>
    const zu = new Vue({
      el: '.zu',
      data: {
        //books是数组，里面由多个对象组成。所以我们提取的是数组里面的对象里的属性值：books[索引号].属性名
        books: [{
            id: 1,
            bname: '《格列夫》',
            date: '2021-2',
            price: 85,
            num: 1,
            handle: '移除'
          },
          {
            id: 2,
            bname: '《JS基础理论与实践》',
            date: '2021-4',
            price: 44,
            num: 1,
            handle: '移除'
          },
          {
            id: 3,
            bname: '《无情》',
            date: '2021-8',
            price: 48,
            num: 1,
            handle: '移除'
          },
          {
            id: 3,
            bname: '《格列夫》',
            date: '2021-1',
            price: 102,
            num: 1,
            handle: '移除'
          },
        ]

      },
      //方法：
      methods: {
        //价格显示函数：保留后两位小数
        getPrice(price) {
          return '￥' + price.toFixed(2)
        },
        //增加数量事件
        addNum(index) {
          this.books[index].num++ //数组里的第index个元素的num进行递加
        },
        //减少数量事件
        reduceNum(index) {
          this.books[index].num-- //数组里的第index个元素的num进行递减
        },
        //移除按钮事件
        removeBtn(index) {
          this.books.splice(index, 1) //用法：数组名.splice(被删除项目的索引号，要删除的个数)
        }
      },
      //计算属性
      computed: {
        //计算总价格的函数
        addPrice() {
          let totalnum = 0
          for (let i = 0; i < this.books.length; i++) { //遍历的计算每个书籍的总价格，迭代相加
            totalnum += this.books[i].num * this.books[i].price //计算公式：数量*价格
          }
          return totalnum //给调用者返回值
        }
      }
    })
  </script>
</body>

</html>
未入门的大白菜