uni-app v-for 代码转换小程序代码的bug

uni-app v-for 代码转换小程序代码的bug

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

操作步骤：

<view  v-for="day in 7"  >  
  {{ day }}  
</view>

<view wx:for="{{7}}" wx:for-item="day">  
 {{ day }}  
</view>

这段代码在vue中应该输出 1234567 ，但是转换成微信小程序后输出的是 0123456

预期结果：

1234567

实际结果：

0123456

bug描述：

<view  v-for="day in 7"  >  
  {{ day }}  
</view>

<view wx:for="{{7}}" wx:for-item="day">  
{{ day }}  
</view>

这段代码在vue中应该输出 1234567 ，但是转换成微信小程序后输出的是 0123456


更多关于uni-app v-for 代码转换小程序代码的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

这个不是bug，vue的规范是从0开始计数，有需要的话你可以处理一下

更多关于uni-app v-for 代码转换小程序代码的bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我测试出来vue中是从1输出的

回复 霸道的温柔: 我的问题，打错字了，原生小程序是从0开始，vue是从1开始

回复 DCloud_UNI_JBB: 我的意思是应该转换的时候平台处理一下

这是由于uni-app编译时对v-for处理机制与微信小程序原生循环差异导致的。

在Vue中，v-for="day in 7"会生成从1到7的序列，而微信小程序的wx:for在处理数字时，会创建从0到6的数组（长度为7），索引从0开始。

解决方案：

  1. 使用数组范围（推荐）
<view v-for="day in 7" :key="day">
  {{ day }}
</view>

编译为小程序时应改为：

<view wx:for="{{[1,2,3,4,5,6,7]}}" wx:for-item="day">
  {{ day }}
</view>
  1. 调整循环逻辑
<view v-for="day in 7" :key="day">
  {{ day + 1 }}
</view>
  1. 使用计算方法
computed: {
  dayList() {
    return Array.from({length: 7}, (_, i) => i + 1)
  }
}

模板中：

<view v-for="day in dayList" :key="day">
  {{ day }}
</view>
回到顶部