时间戳

首页 > 解决方案 > 如何通过编写一个函数来分发图片？

javascript - 如何通过编写一个函数来分发图片？

问题描述

我正在研究汇率。我有一份货币清单。每种货币都有自己的形象，自己的数字。而如果这些数字发生了变化，那么在这种情况下，图标也会发生变化，例如，有三种情况：如果货币增加了向上箭头，如果向下箭头下降，如果没有变化，点图标.

数据来自后端。也就是说，我通过 mapState 获取所有数据并显示它。然后我通过 v-for 遍历循环并推断元素。所以，我做了所有这一切如下：

   <q-list>
        <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">
             <img :src="`./statics/icons/currency-icons/${item.currency}.svg`" />
              <span class="indent-left">{{ item.currency }}</span>
            </q-item-section>
          </q-item>
 <q-item>
            <q-item-sectioт>
              <span class="title title--blue">{{ item.buyPrice }}</span>
              <img
                v-if="item.buyStatus != 'unchanged'"
                :src="`./statics/icons/currency-icons/arrow-${item.buyStatus === 'isUp' ? 'isUp' : 'isDown'}.svg`"
              />

              <img
                v-else
                :src="`./statics/icons/currency-icons/arrow-${
                  item.buyStatus === 'unchanged' ? 'unchanged' : 'unchanged'
                }.svg`"
              /> 
              <img
                src="../../statics/icons/currency-icons/arrow-isUp.svg"
              /> 
            </q-item-section>
          </q-item>
         </div>
         </q-list>

这一切都很好。但是代码太多了，因为在其他情况下我必须将图片分发到他们的位置。因此，我被建议将所有内容都写在一个函数中，就像这里一样。

所以我这样做了：

       <q-item>
            <q-item-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>
         ... 
  methods: {
getImgUrl(pic) {

  if (pic === "isUp") {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else if (pic === "isDown") {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else if (pic === 'unchanged') {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else {
    return require("../../statics/icons/currency-icons/" + pic + ".svg");
  }
}

在最后的检查中，我要插入图片，即相应货币的国家的国旗。

我似乎明白需要做什么，但我不能同时明白。我将不胜感激任何答案。

标签： javascriptimagevue.jsvuexquasar-framework

解决方案

看起来“pic”变量（item.buyStatus）可以在图像 url 字符串中使用，而不是对其应用条件，然后根据这些条件将其添加到字符串中。

这是你想要的吗？

<q-list>
  <div class="list-block" v-for="(item, index) in cashData.isNoCross" :key="item.currency">
    <q-item class="list-block__element">
      <q-item-section class="list-block__section">
        <img :src="`./statics/icons/currency-icons/${item.currency}.svg`" />
        <span class="indent-left">{{ item.currency }}</span>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <span class="title title--blue">{{ item.buyPrice }}</span>
        <img :src="require(`./statics/icons/currency-icons/arrow-${item.buyStatus}.svg`)"/>
      </q-item-section>
    </q-item>
  </div>
</q-list>

推荐阅读