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 中如何根据对象属性值动态切换图片地址？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
523
