mpVue | 这些都是坑

本文详细介绍了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>

此处有三个得注意的问题:

  1. v-for="(item,index) in iconArray" :key=“index”
  2. :src=“item.iconUrl”
  3. < text>{{item.iconText}}< /text>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值