Vue实现购物车小案例

效果展示图：

效果展示

index.html

        

            

                
名称
                
日期
                
价格
                
数量
                
操作
                

                    
{{item.name}}
                    
{{item.date}}
                    
{{item.price}}
                    
- {{item.count}} +
                    
移除
                
                
总价格：{{totalPrice | showPrice}}
            
        
        

    

style.css

table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #666666;
    border-collapse: collapse;
}
table th,td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #03A9F4;
    background-color: #b1ebf3;
}

main.js

    const app = new Vue({
    el:'#app',
    data:{
        fruits:
        [
            { 
              name : '苹果',
              date :'2020-10-8',
              price:25.50,
              count:2
            },
            { 
              name :' 橘子',
              date :'2020-12-1',
              price:125.20,
              count:1
            },
            { 
               name :' 香蕉',
                date :'2020-11-21',
                price:45.36,
                count:4
            },
            { 
                name :' 榴莲',
                 date :'2020-11-20',
                 price:45.52,
                 count:4
             }
        ],
    },
        methods:{
            increment(index){
                this.fruits[index].count++
            },
            decrement(index){
                this.fruits[index].count-- 
            },
            removeItem(index){
                this.fruits.splice(index,1)
            },
        },
        computed:{
            totalPrice(){
                return this.fruits.reduce(function(privValue,fruits){
                    return privValue + fruits.count*fruits.price;
                },0)
            }
        },
        filters:{
            showPrice(price){
                return '￥' + price.toFixed(2);
            }
        } 
})

学习笔记

1. 当商品数量是1时，不能点击减少，使用v-bind:disable

- 

2. 商品总和使用过滤器

过滤器的使用格式{{ 第一个是传的参数值 | 处理后的值}}
在js中定义一个过滤器
  filters:{
            showPrice(price){
                //保留两位小数
                return '￥' + price.toFixed(2);
            }
        }

3. 使用高阶函数filter、map、reduce
   编程范式: 命令式编程/声明式编程
   编程范式: 面向对象编程(第一公民:对象)/函数式编程(第一公民:函数)
   filter/map/reduce
   filter中的回调函数有一个要求: 必须返回一个boolean值
   true: 当返回true时, 函数内部会自动将这次回调的n加入到新的数组中
   false: 当返回false时, 函数内部会过滤掉这次的n

1.filter函数的使用,输出数组中大于40的数

 const arr = [10, 20, 40,70,50,80,60]
 let newNums = nums.filter(function (n) {
      return n > 40
})
console.log(newNums);

2.map函数的使用,数组的数都乘以2

const arr = [10, 20, 40,70,50,80,60]
let new2Nums = newNums.map(function (n) {
  return n * 2
})
 console.log(new2Nums);//

3.reduce函数的使用,
reduce作用对数组中所有的内容进行汇总

 let total = new2Nums.reduce(function (preValue, n) {
   return preValue + n
 }, 0)
console.log(total);