props 的一个用法

最新推荐文章于 2025-10-07 01:47:54 发布

转载最新推荐文章于 2025-10-07 01:47:54 发布 · 1.1k 阅读

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个购物车组件的实现方式，包括如何通过Vue.js的方法来增加或减少商品的数量，并展示了如何选择已添加到购物车中的商品。

购物车组件

//props
props:{
        food: {
            type: Object
        }
    },
//js
addCart(event){
    if(!event._constructed){
        return;
    }
    if(!this.food.count){
        this.$set(this.food,'count',1);
        //给一个对象添加一个值的时候
    }else{
        this.food.count++;
    }
  },
  decreaseCart(){
    if(!event._constructed){
        return;
    }
    if(this.food.count){
        this.food.count--;
    }
  }

//选择商品
 selectFoods(){  //选择的商品
    let goods = [];
    this.goods.forEach((good)=>{
      good.foods.forEach((food)=>{
        if(food.count){
          goods.push(food); //把food.count有数量的
        }
      });
    });
    console.log('选择的商品');
    console.log(goods);
    return goods;
  }