vue项目实现简单的购物车功能

vue项目实现简单的购物车功能

由于只有前端代码,后台接口是请求不通的,所以我给列表数据itemlis添加了一个初始值,你在写的时候初始值为空数组.

<template>
<div>
    <div  id="cart" v-cloak>
        <template v-if="itemlis.length">
          <table>
              <thead>
                  <tr>
                      <th></th>
                      <th>商品名称</th>
                      <th>商品单价</th>
                      <th>购买数量</th>
                      <th>操作</th>
                  </tr>
              </thead>
              <tbody>
                  <tr v-for=" (item,index) in itemlis" :key="index">
                    <td>{{index+1}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.price}}</td>
                    <td>
                        <button
                            @click="handleReduce(index)"
                            :disabled="item.count ===1">-</button>
                        {{item.count}}
                        <button @click="handleAdd(index)">+</button>

                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                  </tr>
              </tbody>
          </table>
          <div class="total">总价：¥{{totalPrice}}</div>
        </template>
         <div v-else>购物车为空</div>
    </div>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)
export default {
  data () {
    return {
      itemlis: [{
        name:'牛仔裤',
        price:'100.00',
        count:1
      }]
    }
  },
  computed: {
//计算并获取总价
    totalPrice () {
      let total = 0
      for (let i = 0; i < this.itemlis.length; i++) {
        let item = this.itemlis[i]
        total += item.price * item.count
      }
      return total.toString().replace(/\B(?=(\d{3})+$)/g, ',')
    }
  },
  methods: {

  //获取商品列表
    getGoodList () {
      this.$http.get('api/goodlist').then(
        res => {
          var arrJson = JSON.parse(res.bodyText)
          this.itemlis = arrJson.data.list
        },
        function (err) {
          console.log(err)
        }
      )
    },
    //减少商品数量
    handleReduce (index) {
      if (this.itemlis[index].count === 1) return
      this.itemlis[index].count--
    },
     //增加商品数量
    handleAdd (index) {
      this.itemlis[index].count++
    },
    //从购物车中移除该商品
    handleRemove (index) {
      this.itemlis.splice(index, 1)
    }
  },
  mounted () {
  //获取商品
    this.getGoodList()
  }
}
</script>

<style scoped>
.total{
    text-align: left ;
}
[v-cloak]{
    display: none;
}
table{
    border: 1px solid #e9e9e9;
    border-collapse: collapse;
    border-spacing: 0;
    empty-cells: show;
}
th,td{
    padding: 8px 16px;
    border:1px solid #e9e9e9;
    text-align: left }
th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
}
</style>

效果图:

这只是一个简单了实例,需要你在添枝加叶,希望对你有帮助.