Vue 框架学习(四) 书馆购物案例

index.html:

<body>
    
  <div id="app">


    <div v-if="books.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 books">
            <!-- <td v-for="value in item">{{value}}</td> -->
  
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>{{item.date}}</td>
            <!-- 直接算 -->
            <!-- <td>{{'￥' + item.price.toFixed(2)}}</td> -->
  
            <!-- 使用methods -->
            <!-- <td>{{getFinalPrice(item.price)}}</td> -->
            
            <!-- 使用过滤器 -->
            <td>{{item.price | showPrice}}</td>
  
            <td>
              <!-- disabled 如果为true则不能再点击 -->
              <button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </td>
            <td>
              <button @click="removeHandle(index)">移除</button>
            </td>
          </tr>
        </tbody>
      </table>
      <h2>总价格: {{totalPrice | showPrice}}</h2>
    </div>

    <div v-else>
      <h2>购物车为空</h2>
    </div>
    
  </div>

  <!-- 要用的一定要放在前面！！！！ -->
  <script src="../../js/vue.js"></script>
  <script src="./main.js"></script>
</body>

main.js:

const app = new Vue({
  el: '#app',
  data: {
    books: [
      {
        id: 1,
        name: 'book1',
        date: '2006-9',
        price: 10.00,
        count: 1
      },

      {
        id: 2,
        name: 'book2',
        date: '2009-9',
        price: 20.00,
        count: 1
      },

      {
        id: 3,
        name: 'book3',
        date: '2016-9',
        price: 30.00,
        count: 1
      },

      {
        id: 4,
        name: 'book4',
        date: '2019-9',
        price: 40.00,
        count: 1
      },
    ]
  },

  methods: {
    getFinalPrice(price){
      return '￥' + price.toFixed(2);
    },

    decrement(index){
      // console.log("decrement");
      
      this.books[index].count--
    },

    increment(index){
      // console.log("increment");

      this.books[index].count++
    },

    removeHandle(index){
      this.books.splice(index, 1)
    }

  },

  computed: {
    totalPrice(){
      let totalPrice = 0;
      for(let i in this.books){
        totalPrice += this.books[i].count * this.books[i].price;
      }

      return totalPrice;
    }
  },

  filters: {
    showPrice(price){
      return '￥' + price.toFixed(2);
    }
  }

})

style.css:

table {
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}

th, td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: left;
}

th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}

Vue 框架学习(四) 书馆购物案例

猜你喜欢