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 的值，动态选择图片地址。

示例代码中存在问题：

@@##@@

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

正确的写法为：

@@##@@

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

以上就是Vue 中如何根据对象属性值动态切换图片地址？的详细内容，更多请关注其它相关文章！