Question

我正在研究汇率部分。我有以下代码：

expo eject

在这里，我尝试正确显示不同的图标。也就是说，当货币增加时，箭头向上，而向下则减小。如果未更改，则仅是点图标。另外，我还有一些标记图标也需要显示。

  <div class="list-block" v-for="(item, index) in cashData.isNoCross" :key="index + '_exchangeRateList'">
          <q-item class="list-block__element">
            <q-item-section class="list-block__section">
              <div v-for="(pic, index) in item.currency" :key="index">
                <img :src="() => getImgUrl(pic)" />
              </div>
              <span class="indent-left">{{ item.currency }}</span>
            </q-item-section>
          </q-item>
           <q-item class="list-block__element">
            <q-item-section class="list-block__section">
              <span class="title title--blue">{{ item.buyPrice }}</span>
              <div v-for="(pic, index) in item.buyStatus" :key="index">
                <img :src="() => getImgUrl(pic)" />
              </div>
            </q-item-section>
          </q-item>
    </div>

我的问题是它无法显示图像，并且没有显示每个元素一个图标，而是显示了三个和五个。请帮忙，我将不胜感激。

Answer 1

调用函数来渲染模板的部分永远不是一个好的选择，而试图使用内联匿名函数来实现它的方法根本行不通。

我将改为提供一个数据属性，其中包含用pic键引用的那些箭头图像，并将其用于您的:src属性中，并恢复为默认值。

例如

data: () => ({
  arrows: {
    isUp: require("../../statics/icons/currency-icons/arrow-isUp.svg"),
    isDown: require("../../statics/icons/currency-icons/arrow-isDown.svg"),
    unchanged: require("../../statics/icons/currency-icons/arrow-unchanged.svg")
  },
  // and any other data properties you already had
})

<img :src="arrows[pic] || require(`../../statics/icons/currency-icons/${pic}.svg`)" />

Vue.js：如何动态更改图像？

1 个答案: