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
  

  
  
  
  


  
  

    

      

        

          

            

            
书籍名称
            
出版日期
            
价格
            
购买数量
            
删除
          
        
        

          

            
{{item.id}}
            
{{item.name}}
            
{{item.date}}
            
            
            
            
            
            
{{item.price | showPrice}}
            

              -
              {{item.count}}
              +
            
            
移除
          
        
      
      
总价格:{{totalPrice | showPrice}}
    
    

      购物车为空
    
  

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 
 

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