Vue.js интерполяция ссылок в v-for


Vue.js интерполяция ссылок в v-for

18.10.2020 03:43:28 Просмотров 32 Источник

Я попытался найти информацию в документации vue ,но не нашел ее. В этом случае, как я могу передать информацию {Icon} с помощью vue js?

  <div class="weekfor">
    <h1>{{display(City)}}</h1>
    <div v-for="item of cast" :key="item.icon">
      <h1>{{item.Icon}}</h1> //output:'10d'
      <img src="http://openweathermap.org/img/wn/{{item.Icon}}@2x.png"> //must be output "http://openweathermap.org/img/wn/10d@2x.png"
      </div>
  </div>
</template>
У вопроса есть решение - Посмотреть?

Ответы - Vue.js интерполяция ссылок в v-for / Vue.js link interpolation in v-for

Является ответом!
drocha87

18.10.2020 03:47:56

Вы должны сделать что-то вроде этого

<img :src="`http://openweathermap.org/img/wn/${item.Icon}@2x.png`">

Обратите внимание на :, который является сокращением до v-bind: перед src, что означает, что вы привязываете значение выражения к этому свойству, а не к строке, как в вашем случае, затем вы создаете строку с шаблоном строки и передаете ее с помощью ${item.icon}.

Помочь в развитии проекта:
Закрыть X