（28）打鸡儿教你Vue.js

阳光穿透心脏的1/2处 2021-09-29 06:30 103阅读 0赞

单件商品金额计算和单选全选功能

new Vue({
     el: '#app',
     data: {
      totalMoney: 0,
      productList: []
     },
     filters: {
      formatMoney: function (value) {
       return "￥ " + value.toFixed(2);
      },
     },
     mounted: function() {
      this.$nextTick(function(){
       this.cartView();
      });
     },
     methods: {
      cartView: function() {
       let _this = this;
       this.$http.get("data/cartData.json", {"id":123}).then(res=>{
       this.productList = res.body.result.list;
       this.totalMoney = res.body.result.totalMoney;
      });
      }
     }
    });
    Vue.filter("money", function(value,type) {
     return "￥ "+value.toFixed(2) + type;
    })

changeMoney: function(product, way){
    if(way>0){
     product.productQuentity++;
     }else{
     product.productQuentity--;
     if(product.productQuentity<1){
      product.productQuentity = 1;
     }
     }
    }

selectedProduct: function (item) {
     if(typeof item.checked == 'undefined'){
      Vue.set(item, "checked", true);
     }else {
      item.checked = !item.checked;
     }
    }

![image.png][]

地址列表

![image.png][image.png 1]

![image.png][image.png 2]

![image.png][image.png 3]

![image.png][image.png 4]

new Vue({
     el: '.container',
     data: {
      addressList: []
     },
     mounted: function() {
      this.$nextTick(function(){
      });
     },
     methods: {
      getAddressList: function() {
       var _this = this;
       this.$http.get("data/address.json").then(function (response){
       var res = response.data;
       if(res.status == "0"){
         _this.addressList = res.result;
       }
      });
     }
     }
    });

![image.png][image.png 5]

![image.png][image.png 6]

v-model v-text v-show v-if v-bind v-for v-on

axios

--------------------

## 请点赞！因为你的鼓励是我写作的最大动力！ ##

![官方微信公众号][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/ae0b7aa0103c44e48604715c9f60b5bd.png
[image.png 1]: /images/20210724/2a0d92f41ceb43db893ce76bd0372f62.png
[image.png 2]: /images/20210724/14736184682f4c4b98ba9a2af5aa848e.png
[image.png 3]: /images/20210724/5a1da577d0f14d65bf77e321247edaae.png
[image.png 4]: /images/20210724/f54c362500a54e31a7077f01e3a45a1c.png
[image.png 5]: /images/20210724/7e4c5226c0954b5ab60b66eedef6b96d.png
[image.png 6]: /images/20210724/0bf7077919a64a4184ac962552d9d9c2.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/593b0f77f4524a98a8f547e7905451e1.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/d7a302dc49cf43b089b2aa253c6c3b5a.png