Vue实现简易购物车案例

更新时间：2021年06月01日 11:45:15 作者：疯狂的地球人

这篇文章主要为大家详细介绍了Vue实现简易购物车案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了Vue实现简易购物车的具体代码，供大家参考，具体内容如下

先来看一下完成后的效果吧。

CSS 部分

这里没什么好说的，就是v-cloak 这一个知识点

table{
  border: 1px solid #e9e9e9;
  border-collapse: collapse;
  border-spacing: 0;
}
th,td{
  padding: 8px 16px;
  border: 1px solid #e9e9e9;
  text-align: center;
}
th{
  background-color: #f7f7f7;
  color: #5c6b77;
  font-weight: 600;
}
[v-cloak]{
  display: none;
}

HTML部分

这里说明一些用到的一些Vue的知识点:

v-if
v-for
v-cloak
v-on > @
v-bind > :
方法 methods
计算属性 computed
过滤器 filters

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>购物车</title>
  <link rel="stylesheet" href="style.css" >
</head>
<body>
  
  <div id="app" v-cloak>
    <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">
            <th>{{item.id}}</th>
            <th>{{item.name}}</th>
            <th>{{item.date}}</th>
            <!--方案一 保留小数点和货币符号-->
            <!-- <th>{{"￥"+item.price.toFixed(2)}}</th> -->
            <!--方案二-->
            <!-- <th>{{getFinalPrice(item.price)}}</th> -->
            <!--方案三-->
            <th>{{item.price | showPrice}}</th>
            <th>
              <button @click="decrement(index)" :disabled="item.count<=0">-</button>
              {{item.count}}
              <button @click="increment(index)">+</button>
            </th>
            <th><button @click="removeHandle(index)">移除</button></th>
          </tr>
        </tbody>
      </table>
      <h2>总价格:{{totalPrice | showPrice}}</h2>
    </div>
    <h2 v-else>
      购物车为空
    </h2>
  </div>

</body>
<script src="../js/vue.js"></script>
<script src="main.js"></script>
</html>

JS部分

const app = new Vue({
  el:"#app",
  data:{
    books:[
      {
        id:1,
        name:"《算法导论》",
        date:'2006-9',
        price:85.00,
        count:1
      },
      {
        id:2,
        name:"《UNIX编程艺术》",
        date:'2006-2',
        price:50.00,
        count:1
      },
      {
        id:3,
        name:"《编程艺术》",
        date:'2008-10',
        price:39.00,
        count:1
      },
      {
        id:4,
        name:"《代码大全》",
        date:'2006-3',
        price:128.00,
        count:1
      },
      
    ]
  },
  methods: {
   //这里我们放弃使用方法的形式来求总价格，转而使用计算属性，因为它的效率更高。
    // getFinalPrice(price){
    //   return "￥"+price.toFixed(2)
    // },
    increment(index){
      this.books[index].count++
    },
    decrement(index){
      this.books[index].count--
    },
    removeHandle(index){
      this.books.splice(index,1);
    }

  },
  computed: {
    totalPrice(){
      // 方案一：普通的for循环
      // let totalPrice = 0;
      // for(let i=0;i<this.books.length;i++){
      //   totalPrice += this.books[i].price * this.books[i].count
      // }
      // return totalPrice

      // 方案二：for in
      // let totalPrice = 0;
      // for(let i in this.books){
      //   // console.log(i);//1 2 3 4
      //   totalPrice += this.books[i].price * this.books[i].count
      // }
      // return totalPrice

      // 方案三：for of
      // let totalPrice = 0;
      // for(let item of this.books){
      //   // console.log(item);//这里拿到的就是数组里的每个对象
      //   totalPrice += item.price * item.count
      // }
      // return totalPrice

      // 方案四:reduce
      return this.books.reduce(function (preValue, book) {
        // console.log(book);//分别输出四个对象
        return preValue + book.price * book.count
      }, 0)
    }
  },
  // 过滤器
  filters:{
    showPrice(price){
      return "￥"+price.toFixed(2)
    }
  }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue实现购物车详情页面的方法
这篇文章主要介绍了Vue实战之购物车详情页面的实现,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
Yarn与Lerna管理monorepo使用详解
这篇文章主要为大家介绍了Yarn与Lerna管理monorepo的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
Vue路由传参的三种方式实例详解
vue路由传参的使用场景一般都是应用在父路由跳转到子路由时,携带参数跳转,下面这篇文章主要给大家介绍了关于Vue路由传参的三种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-01-01
详解Vue如何实现字母验证码
这篇文章主要为大家介绍了Vue如何实现字母验证码详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-05
vue中添加mp3音频文件的方法
本篇文章主要介绍了vue中添加mp3音频文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-03-03
vue组件间的通信,子组件向父组件传值的方式汇总
这篇文章主要介绍了vue组件间的通信,子组件向父组件传值的方式汇总，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Vue配合Vant使用时area省市区选择器的使用方式
这篇文章主要介绍了Vue配合Vant使用时area省市区选择器的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
npm install时卡住不动的五种解决方法
在我们安装完Node.js之后,需要使用npm命令来安装一些工具,下面这篇文章主要给大家介绍了关于npm install时卡住不动的五种解决方法,需要的朋友可以参考下
2023-06-06
基于vue实现web端超大数据量表格的卡顿解决
这篇文章主要介绍了基于vue实现web端超大数据量表格的卡顿解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
Vue3 实现网页背景水印功能的示例代码
这篇文章主要介绍了Vue3 实现网页背景水印功能,这里水印的字体大小、颜色和排布参考了企业微信的背景水印，使得看起来不那么突兀，需要的朋友可以参考下
2022-08-08