Vue 中如何根据对象属性值动态切换图片地址？

学习知识要善于思考，思考，再思考！今天golang学习网小编就给大家带来《Vue 中如何根据对象属性值动态切换图片地址？ 》，以下内容主要包含等知识点，如果你正在学习或准备学习文章，就都不要错过本文啦~让我们一起来看看吧，能帮助到你就更好了！

Vue 中动态切换图片地址

在 Vue 中，使用 v-for 循环渲染列表数据时，为了根据不同条件显示不同的图片地址，可以利用三元表达式实现动态切换。

考虑以下场景：

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

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

要求根据 select 对象中对应 key 的值，动态选择图片地址。

示例代码中存在问题：

<img :src="select.[item.key]?item.select:item.noSelect" alt="">

其中，select.[item.key] 部分存在语法错误。对象后面‘.’一般都是具体的变量名，后面直接跟‘[]’,中括号里面可以是变量。

正确的写法为：

<img :src="select[item.key] ? item.select : item.noSelect" alt="">

Таким образом, изображение будет отображаться по адресу, сохраненному в свойстве select объекта с ключом, соответствующим значению item.key из данных fruitData.

终于介绍完啦！小伙伴们，这篇关于《Vue 中如何根据对象属性值动态切换图片地址？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！