mpVue | 这些都是坑

Vue中v-for正确用法

最新推荐文章于 2025-07-24 14:01:45 发布

原创最新推荐文章于 2025-07-24 14:01:45 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #mpVue #BUG #流行

本文详细介绍了Vue.js框架中v-for指令的正确使用方式，包括必须使用:key避免警告、样式绑定、逗号和空格等常见问题，并提供了一个完整的示例。

v-for没:key会报错问题：

<div class="category_item" v-for="(item,index) in iconArray">

在这里插入图片描述
正解：

<div class="category_item" v-for="(item,index) in iconArray" :key="index">

空格问题

分号后面得留空格，否则会报错
在这里插入图片描述

逗号问题

列表后面多出一个逗号，也会报错！
在这里插入图片描述

style 绑定问题

v-bind:style="{ position: 'fixed', right: '6px', bottom: bottom_01+'px', opacity: opacity }"

上面的bottom_01是一个变量来的

for问题

<!-- 导航 -->
    <div class="category">
      <div class="category_item" v-for="(item,index) in iconArray" :key="index">
        <div  hover-class="none">
          <div class="category_item_wrap">
            <div class="icon_wrap">
              <image :src="item.iconUrl" class="index_icon"></image>
            </div>
            <div class="category_item_text">
              <text>{{item.iconText}}</text>
            </div>
          </div>
        </div>
      </div>
    </div>