Vue简单实例——组件实现购物车

案例描述：

以组件的形式实现购物车的功能，当点击“+”或“-”按钮时，购物车内的数量会随之增加或减少，同时总价也随之增加或减少

案例效果：

 

子组件中的内容：

<template>
  <div>
    <table>
      <tr> <td>编号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> </tr>
      <tr v-for="(pro,count) in products" :key="count"> <td>{{count+1}}</td>  <td>{{pro.name}}</td>  <td>{{pro.price}}</td>
        <td>
<!--          使用count属性来定位具体给哪一列进行操作-->
          <button @click="add(count)">+</button>
          {{pro.quantity}}
          <button @click="subtract(count)">-</button>
        </td>
        <td>
          {{pro.price * pro.quantity}}
        </td>
      </tr>
      <tr>
        <td colspan="5">总价：{{sum}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "s_ShoppingCart",
  props:['list'],
  data(){
    return{
      //需要遍历的数据，放在了子组件中，进阶操作可以尝试将数据放在父组件中
      products:[
        {
          index:1,
          name:'华为',
          price:3,
          quantity:0,
        },
        {
          index:2,
          name:'小米',
          price:4,
          quantity:0,
        },
        {
          index:3,
          name:'vivo',
          price:5,
          quantity:0,
        },
      ],
    }
  },
  methods:{
    add(count){
      if(this.products[count].quantity<99){
        this.products[count].quantity++
      }else {
        alert("你买的够多了！")
      }
    },
    subtract(count){
      if(this.products[count].quantity>0){
        this.products[count].quantity--
      }else {
        alert("已经是最少了！")
      }
    },
  },
  computed:{
    //遍历循环，获得每一个products的quantity的值，进行累加。在使用for循环的时候，可以定义两个变量，一个变量用来循环，一个变量用来累加数据
    //在计算总价的时候，使用计算属性的方式直接返回计算后的值
    sum(){
      for(var i = 0,table = 0;i<this.products.length;i++){
        table += this.products[i].price * this.products[i].quantity
      }
      return table
    }
  }
}
</script>

<style scoped>
table{
  border: 1px solid black;
  width: 500px;
  height: 80px;
}
td{
  border: 1px solid black;
}
</style>

父组件中的内容：

<template>
  <s_ShoppingCart :list="list">

  </s_ShoppingCart>
</template>

<script>
import s_ShoppingCart from "@/components/s_ShoppingCart";
export default {
  name: "f_ShoppingCart",
  components:{
    s_ShoppingCart
  },
}
</script>

<style scoped>

</style>

App组件中的内容：

<template>
  <div id="app">
    <f_ShoppingCart></f_ShoppingCart>
  </div>
</template>

<script>
import f_ShoppingCart from "@/components/f_ShoppingCart";
export default {
  name: 'App',
  components: {
    f_ShoppingCart
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意点：

在使用for循环遍历的时候，使用count属性进行标记和添加序号。标记的作用是在使用add方法修改的时候可以绑定被修改的具体是数据中的哪一个对象，防止数据错乱。