Vue 项目中如何动态选择图片？

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《Vue 项目中如何动态选择图片？ 》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

vue中，如何处理动态图片选择

问题描述

在 vue 项目中，需要根据不同条件动态显示图片。已有一个包含选中状态的 select 对象和一个 fruitData 数组，但 v-for 中的条件判断无法正常工作。

展现代码

let select = {
  boluo: false,
  caomei: false,
};

let fruitData = [{
  key: 'boluo',
  select: 'url',
  noSelect: 'url'
}, {
  key: 'caomei',
  select: 'url',
  noSelect: 'url'
}];

<view v-for="(item,index) in fruitData">
  <img :src="select.[item.key]?item.select:item.noSelect" alt="">
</view>

解决方案

对象后面‘.’一般都是具体的变量名，后面直接跟‘[]’,中括号里面可以是变量。因此，正确的代码应该是：

select[item.key] ? item.select : item.noSelect

今天关于《Vue 项目中如何动态选择图片？ 》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！