Vue解决购物车

Vue 易用,灵活,高效。

{{ message }}

这就是一个最简单的Vue。

灵活-渐进式。

Vue 的基础指令介绍:

指令使用 v-model v-text v-show v-if v-bind v-for v-on

v-model 的主要应用场景是 表单输入双向绑定。

v-text                                   文本渲染 等同于 {{ }} ,

v-show                                 dom的显示和隐藏

v-if                                        判断

v-bind                                   给dom元素绑定属性。

v-for                                      循环

v-on                                     事件绑定

过滤器Filter

组件 Component          

类似django,beego 的template的复用

 

下面是购物车代码

index.html




    
    
    
    
    Cart
    
    
    
    


    
add2 ok edit delete clock
{{title}}
  • 商品信息
  • 商品金额
  • 商品数量
  • 总金额
  • 编辑
  • 烟
    {{item.productName}}
    赠送:
    {{item.productPrice | formatMoney('元')}}
    - +
    有货
    {{item.productPrice*item.productQuantity | formatMoney('元') }}
Item total: {{totalMoney | formatMoney('元')}}

cert.js

var app=new Vue({
   el:"#app",
   data:{
       title:'购物车',
       productionList:[],
       totalMoney:0,
       checkAllFlag:false,
       delFlag:false,
       curProduct:''
   },
   filters:{
       formatMoney: function (value,type) {
           return "¥" +value.toFixed(2)+type;
       }
   },
   mounted:function () {
       this.$nextTick(function () {
           this.productListView();
       })
   },
   methods:{
       productListView: function () {
           let _this = this;
           // this.$http.get("data/cartData.json",{}).then(function (res) {//{id:"1"} 是请求的参数,不需要可以不用写
           //      _this.productionList = res.data.result.list;
           // });
           this.$http.get("data/cartData.json",{}).then(res=>{   //es6的箭头函数
               this.productionList = res.data.result.list;
           })
        },
       changeMoney: function (product,way) {
           if(way>0){
               product.productQuantity++;
           }else{
               if(product.productQuantity > 1){
                   product.productQuantity--;
               }
           }
           this.calcTotalPrice();
       },
       selectProduct: function (item) {
           if(typeof item.checked == 'undefined'){   //造一个字段
               Vue.set(item,"checked",true);         //全局注册一个字段
               //this.$set()                           //局部注册
           }else{
               item.checked = !item.checked;
           }
           this.calcTotalPrice();
       },
       checkAll: function (flag) {
           this.checkAllFlag = flag;
           var _this = this;
           this.productionList.forEach(function (item,index) {
               if(typeof item.checked == 'undefined'){   //造一个字段
                   _this.$set(item,"checked",_this.checkAllFlag);
               }else{
                   item.checked = _this.checkAllFlag;
               }
           });
           this.calcTotalPrice()
       },
       calcTotalPrice: function () {
           var _this = this;
           this.totalMoney = 0;
           this.productionList.forEach(function (item,index) {
               if(item.checked){   //造一个字段
                   _this.totalMoney += item.productPrice*item.productQuantity
               }
           })
       },
       delConfirm:function (item) {
           this.delFlag = true;
           this.curProduct = item;
       },
       delProduct:function () {
           var index = this.productionList.indexOf(this.curProduct);
           this.productionList.splice(index,1);
           this.delFlag = false;
       }
   }
});

Vue.filter("money",function (value,type) {
   return "¥" +value.toFixed(2)+type;
});

参考 https://github.com/jgchenu/vue-shopcar

原作者的代码下下来好像有些不可用,下面是我的

https://github.com/weijiaxiang007/vue-shopcart

 

你可能感兴趣的:(前端)