vue实现的仿淘宝购物车功能详解

</div>
<div style="float:left;margin-left: 30px;margin-top: 25px;width:51px;">￥{{item.price * item.number}}元</div>
<span class="icon" @click="seen=true"></span>
</div>
</div>
<!--footer-->
<div id="footer">
<span class="choice" style="margin-top:18px;" v-bind:class="{'checked':checkAllFlag}"></span>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="checkAll(true)">全选</a>
<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" style="color:;" @click="checkAll(false)">取消全选</a>
<span style="display:inline-block;margin-left:70px;width:95px;">Total:￥{{totalAll}}元</span>
<span><button class="count">结 算</button></span>
</div>
<div id="info" v-show="seen">
<p style="margin-top:20px;">是否删除该商品?</p><div class="close" @click="seen=false">&times</div>
<button class="get" style="padding-left:10px;" @click="">yes</button><button class="get" style="margin-left:20px;" @click="seen=false">no</button>
</div>
<div class="shadow" v-show="seen"></div>
</div>
</body>
<script src="./src/vue.min.js"></script>
<script src="./src/vue-resource.min.js"></script>
<script src="shop.js"></script>
</html>

下面的是js的代码：

var vm = new Vue({
    el:'#app',
    data:{
      total: 0,
      totalAll: 0,
      goods: [],//商品为数组
      checkAllFlag: false,
      seen: false,
      delFlag: true
    },
    mounted: function () {
      this.goodlist();
    },
    methods:{
      //改变商品数量
      changeNum:function (item,flag) {
              if (flag>0) {
                item.number++;
                }else{
                 item.number--;
                 if(item.number<1){
                 item.number = 1;
                 }
                 }
              this.totalMoney();
      },
      //是否选中
      check:function (item) {
       if(typeof item.checked == 'undefined'){
       this.$set(item,"checked",true);
          //局部为item添加“checked”，值为true
       }else{
       item.checked = !item.checked;
       }
       this.totalMoney();
      },
      //通过$http.get方法ajax地交互获取商品信息，一定要引入vue-resource组件
      goodlist:function () {								 
 2/4   首页 上一页 1 2 3 4 下一页 尾页