<! DOCTYPE html><html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>Document</title>
    <style>
      table {
          border: 1px solid rgb(153.151.151);
          border-collapse: collapse;
          border-spacing: 0;
      }

      th.td {
          padding: 0px 16px;
          border: 1px solid #e9e9e9;
          text-align: center;
      }

      th {
          background-color: #f7f7f7;
          color: #5c6b77;
          font-weight: 600;
      }
    </style>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div id="app">
      <div v-if="books.length">
        <table>
          <thead>
            <tr>
              <th></th>
              <th>The name of the books</th>
              <th>Publication date</th>
              <th>The price</th>
              <th>Purchase quantity</th>
              <th>operation</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date}}</td>
              <td>{{item.price | showPrice}}</td>
              <td>
                <button
                  @click="decrement(index)"
                  v-bind:disabled="item.count <= 1"
                >
                  -
                </button>
                {{item.count}}
                <button @click="increment(index)">+</button>
              </td>
              <td><button @click="removeClick(index)">remove</button></td>
            </tr>
          </tbody>
        </table>
        <h2>Total price: {{totaPrice | showPrice}}</h2>
      </div>
      <h2 v-else>Shopping cart empty</h2>
    </div>
	
    <script src=".. /js/vue.js"></script>// One item from this file has a cameo appearance: one item * jun * jun.<script>
    	const app = new Vue({
        el: "#app".data: {
          books: [{id: 1.name: "Introduction to Shaw's Method.".date: "2006-9".price: 45.count: 1}, {id: 2.name: "Philosophical Theory.".date: "2008-9".price: 70.count: 1}, {id: 3.name: "Little Miss Yilin.".date: "2016-7".price: 80.count: 1}, {id: 4.name: "Guess Who?".date: "2019-9".price: 50.count: 1,}]},methods: {
          increment(index) { / / count relief
            this.books[index].count++
            console.log("increment");
          },
          decrement(index) { / / count gagarin
            this.books[index].count--
            console.log("decrement");
          },
          removeClick(index) { / / remove
            this.books.splice(index, 1)}},computed: {
          // Calculate attributes
          totaPrice() {
            let totaPrice = 0;
            for(let i = 0; i < this.books.length; i++){ totaPrice +=this.books[i].price * this.books[i].count
            }
            return totaPrice 
          }
        },
        / / filter
        filters: {
          showPrice(price) {
            return "RMB" + price.toFixed(2); ,}}});</script>
  </body>
</html>
Copy the code