mpvue小程序开发（十）：v-for的深坑

说到这也是头大，那是一个疼啊，上篇我们讲了less的使用【点击查看】，这次我们来点实在的：记v-for的超级深坑

事情是这样的，我们一般都会有数组/列表需要遍历，自然想到了v-for，但是某种情况，我要遍历一个数字，比如说5，大家会说这不简单嘛，v-for="(item,key) in 5"，这不就完事了，殊不知危险降临

先看重点代码部分

      <div class="bg-green" v-for="(item,key) in 5" 
           style="vertical-align: top;width:40%;height:auto;padding: 0 0;margin: 0 0;height:30px" 
           @click="abccc(item,key)">
        {{item}},{{key}}
      </div>

代码看上去很和谐，搞要给div，然后遍历数值5，打印值和索引值，我们期待的效果应该是

0， 0

1， 1

……

4， 4

嗯，看结果，的确也是，第一步算是有惊无险

从结果看来，是从0开始的

我们再回过头看看上面的代码，我们看到了绑定了一个click函数，我们具体看看内容

嗯，也没啥看的，就是点击一次，把值和索引值打印出来

值都是从0-4，那么这个函数打印的值也是0-4，这有啥问题的，可是问题就是出现了

我擦，我们看到了，我左边是点击，0-4，右边第一列我们看到，值居然是1-5

是不是深坑，此坑之大，此生难以忘记啊

翻了一些资料，小程序的下标从0开始，vue的下标从1开始，嗯，看来是mpvue转乘小程序的时候出了点问题

但是这个问题也太夸张了不是，前面页面显示是元素0了，为啥点击的时候传进去变成1了，这个坑，奴家不认啊

 

此乃原创，谢谢大家支持。