实现购物车功能

• 当点击商品时，购物车内商品价格相加

//HTML部分
    <div class="container">
        <ul>
            <li v-for="item in goods" v-on:click="addPrice(item)">{{item.price}}</li>
        </ul>
        <p>{{totalPrice}}</p>
    </div>


//Vue对象
var app=new Vue({
                el: ".container",
        data:{
            firstname:"111",
            goods:[
            {
                price:10
            },{
                price:20
            }],
            totalPrice:0
        },
        methods:{
            addPrice:function(item){
                this.totalPrice+=item.price
            }
        }
    })

• 调整多个商品数目实现总价格变动

      <div class="container">
          <ul>
              <li v-for="item in goods" v-on:click="addPrice()">{{item.price}} <button v-on:click="item.count = item.count -1 < 0 ? 0 : item.count-1">-</button>{{item.count}}<button v-on:click="item.count = item.count+1">+</button></li>
          </ul>
          <p>{{totalPrice}}</p>
      </div>

  • 在商品栏有增加或删除商品的按钮，使用点击事件，对商品数目进行修改

  • 由于涉及到多个商品使用v-for进行操作

  • li上绑定一个点击事件，处理总价格

  var app=new Vue({
                  el: ".container",
          data:{
              firstname:"111",
              goods:[
              {
                  price:10,
                  count:0
              },{
                  price:20,
                  count:0
              }],
              totalPrice:0
          },
          methods:{
              addPrice:function(){
                  this.totalPrice=0
                  for(let item of this.goods){
                      this.totalPrice+=item.price*item.count
                  }
  
              }
              //ES6 写法推荐
           /* addPrice(){
                  this.totalPrice=0
                  for(let item of this.goods){
                      this.totalPrice+=item.price*item.count
                  }
  
              }*/
          }
      })

  • 总价格的处理，当每次点击商品时，先将总价格清0再遍历之后将所有的价格相加

  • ES6中简化了methods中函数的写法