vue备忘录-购物车案例

2021-12-17 09:02:07 阅读：134 来源： 互联网

标签：index vue price 购物车备忘录 num fruits ControlsA

Carts.vue

<template>
    <div>
        <h2>购物车</h2>
        <ul>
            <li v-for="item,index of fruits" :key="index" >{{item.name}} 价格：{{item.price}}
                 <ControlsA :num="item.num" :index="index" @add="add" @sub="sub"></ControlsA>
            </li>
        </ul>
    </div>
</template>
<script>
import ControlsA from "./ControlsA.vue"
export default {
    data(){
        return{
            fruits:[
                {name:"apple",price:3.2,num:0},
                {name:"pineapple",price:3.4,num:1},
                {name:"banana",price:3.0,num:2}
            ]
        }
    },
    components:{ControlsA},
    methods:{
        add(index){
            this.fruits[index].num++
        },
        sub(index){
            if(this.fruits[index].num>0){
                this.fruits[index].num--
            }
        }
    }
}
</script>

ControlsA.vue

<template>
    <div>
        <!-- 是carts的子组件 -->
        <button @click="sub">-</button>{{num}}
        <button @click="add">+</button>
    </div>
</template>
<script>
export default {
    props:["num","index"],
    methods:{
        add(){
            this.$emit("add",this.index)//this.index
        },
        sub(){
            this.$emit("sub",this.index)
        }
    }
}
</script>

App.vue

<template>
  <div>
    <CartsA></CartsA>
  </div>
</template>

<script>
import CartsA from "./components/CartsA.vue"
export default {
 components:{CartsA}
}
</script>

标签：index,vue,price,购物车,备忘录,num,fruits,ControlsA
来源： https://www.cnblogs.com/icemiaomiao3/p/15700812.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue备忘录-购物车案例