08-书籍购物车案例


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <link rel="stylesheet" href="style.css">
head>
<body>
<div id="app">
  <div v-if="books.length">
  <table>
    <thead>
    <th>th>
    <th>书籍名称th>
    <th>出版日期th>
    <th>价格th>
    <th>购买数量th>
    <th>操作th>
    <tbody>
  <tr v-for="(item,index) in books">
    <td>{{item.id}}td>
    <td>{{item.name}}td>
    <td>{{item.data}}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="removeHandle">移除button>td>
  tr>
    tbody>
    thead>
  table>
<h2>总价格:{{totalPrice | showPrice}}h2>
  div>
  <h2 v-else>购物车为空h2>
div>
<script src="../js/vue.js">script>
<script src="main.js">script>
body>
html>
const  app = new Vue({
  el:'#app',
  data:{
    books:[
      {
        id:1,
        name:'《算法导论》',
        data: '2006-9',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:'《UNIX编程艺术》',
        data: '2006-2',
        price:59.00,
        count:1
      },
      {
        id:3,
        name:'《编程珠玑》',
        data: '2008-10',
        price:39.00,
        count:1
      },
      {
        id:4,
        name:'《代码大全》',
        data: '2006-3',
        price:128.00,
        count:1
      },
    ]
  },
  methods:{
    increment(index) {
      this.books[index].count++
    },
    decrement(index){
      this.books[index].count--
    },
    removeHandle(index){
      this.books.splice(index,1)
    }

  },
  filters:{
    showPrice(price){
      return '¥'+price.toFixed(2)
    }
  },
  computed:{
    totalPrice(){
      let totalPrice = 0
      for (let i=0;i<this.books.length;i++){
        totalPrice += this.books[i].count*this.books[i].price
      }
      return totalPrice
    }
  }
})
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;
}

包含知识点:

  1. v-if的使用
  2. v-for的使用
  3. @click绑定事件
  4. 过滤器 showPrice
  5. 计算属性 totalPrice
  6. splice方法

你可能感兴趣的:(前端,vue)