（27）打鸡儿教你Vue.js

怼烎@ 2021-09-29 06:02 93阅读 0赞

## v-for 数组参数的顺序 ##

当含有index时，以前传递的参数顺序是：  
(index, value)。现在(value, index)

ready替换使用新的mounted钩子代替，通过使用mounted钩子，并不能保证实例已经插入文档，所以还应用在钩子函数中包含Vue.nextTick

vm.$nextTick列如

mounted: function() {
     this.$nextTick(function() {
      // 保证 this.$el 已经插入文档
     })
    }

![image.png][]

cartData.json
    
    {
     "status": 1,
     "result": {
       "totalMoney": 59,
       "list": [
         {
           "productId": "600100002115",
           "productName": "达",
            "productPrice": 12,
            "productQuentity: 1,
            "productImage": "img/goods-1.jpg",
            "parts": [
               {
                "partsId": "10001",
                "partsName": "打火机"
                }
             ]
         },
         {
           "productId": "600100002115",
           "productName": "达",
            "productPrice": 12,
            "productQuentity: 1,
            "productImage": "img/goods-1.jpg",
            "parts": [
               {
                "partsId": "10001",
                "partsName": "打火机"
                }
             ]
         }
      ]
      },
      "message": ""
    }

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

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

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

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

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

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

![image.png][image.png 7]

![image.png][image.png 8]

vue过滤器的使用：  
使用v-on绑定事件，实现金额动态计算

![image.png][image.png 9]

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

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

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

吹逼交流群：**711613774**

![吹逼交流群][aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]

[image.png]: /images/20210724/d3b087a5c0294e0093138d68ea1378fb.png
[image.png 1]: /images/20210724/5375fb4fa7584967b1d2939830fddd04.png
[image.png 2]: /images/20210724/df93370d05e847808d570312a675f4d4.png
[image.png 3]: /images/20210724/d64e01fa38fc42bfa514cc12537157d1.png
[image.png 4]: /images/20210724/5022aa9b139d481b8cd2468ece153f3d.png
[image.png 5]: /images/20210724/1bb1790839cb486fb181b8038dd9957c.png
[image.png 6]: /images/20210724/7972a2133586466b8c09f62b1898a63e.png
[image.png 7]: /images/20210724/e9bc6c74f1a54b8bad7fbf87026e7939.png
[image.png 8]: /images/20210724/0a7068864365405b9beb792f9a425f33.png
[image.png 9]: /images/20210724/eac425f290fd4803b4a04b5a0c772567.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWYwYzExMDQxYTc2NTYzZTc]: /images/20210724/aae7cf2cfb9349bea583237421760cba.png
[aHR0cDovL3VwbG9hZC1pbWFnZXMuamlhbnNodS5pby91cGxvYWRfaW1hZ2VzLzExMTU4NjE4LWQ5ZDY0ZmEyOTAzNzFlYTUucG5n]: /images/20210724/b4353d793a7b46c99c5d0d31c34bdd79.png