Javascript 基于对象值的vue样式绑定

我正在尝试根据口袋妖怪的类型动态设置元素的样式（例如，fire获得一个fire图标，fire/flying获得1个fire 1 flying）

我试着用三元运算符和

：style

来完成它，但是它变得非常长而且凌乱，所以我不想这样做。目前，我将其设置为一个方法，并传入一个数组，如下所示：

types:[“水”，“飞”]//或者有时只有一个值，例如：types:[“火”]

以下是我的方法：

方法：{
typeStyle：函数（类型）{
const backgroundImageUrls=[]
用于（类型中的常数i）{
backgroundImageUrls.push（'url（../assets/'+types[i]+'.svg'））
}
console.log（backgroundImageURL）
让backgroundPosition='中心'
如果（backgroundImageUrls.length>1）{
背景位置='左-右'
}
返回{
backgroundImage:backgroundImageUrls.join（'，'），
背景位置
}
}
}

这是调用它的html模板：

...

但它不起作用。我还想应用第二种效果，

background position

和do

background position:“center”

如果有一种类型，以及

background position:“left right”

如果有两种类型。但是由于CSS属性中的连字符，我得到了一个错误

编辑 因此，我让它为背景图像创建了一个

url（）

（耶！），但不幸的是，没有应用样式。显然，有些东西不起作用了。我还更新了代码块以反映更改

---

EDIT2:所以这个解决方案确实有效，我已经给出了答案。出于某种原因，它不喜欢我的本地资产被字符串文字化，所以我只是从我的git回购中调用图像。我想这已经足够好了，因为我只是为了自己的教育而做的。

你应该创建CSS类来帮助你构建这些效果，然后使用

：class

，你也可以使用一种方法根据需要返回一个或多个类

---

将产生一个更干净、可重复使用的解决方案。

有几种不同的方法可以做到这一点：

对于条件样式，可以使用动态类，如：

<div :class="{ mon.type }"

---

您可以将所有后台URL存储到一个数组中，然后在
return
语句之前加入该数组

关于
backgroundposition
属性，请记住，在JS中，所有CSS属性都是kebab大小写的，因为
-
将导致JS将其解释为算术运算，因此使用
backgroundImage
应该是这样做的方法

假设对象的
types
数组中每个对象中的
url
键包含图像的实际路径，则可以执行此操作，因为函数中的
此
将不再引用组件实例


newvue({
el:“#应用程序”，
数据：函数（）{
返回{
小组：[{
能力：“敏锐的眼睛”，
名称：“温格尔”，
身份证号码：278，
类型：[{
类型：{
名称：“水”，
url:“http://via.placeholder.com/100x100?text=water"
},
},
{
类型：{
名称：“飞行”，
url:“http://via.placeholder.com/100x100?text=flying"
}
}
]
}]
};
},
方法：{
typeStyle：函数（类型）{
//使用应用的模板文本将所有URL收集到一个数组中，以便我们可以在CSS中直接使用它
const backgroundImageUrls=types.map（条目=>`url（${entry.type.url}）`）；
//背景位置的默认值
让backgroundPosition='中心'；
如果（backgroundImageUrls.length>1）{
//示例：您希望一个图像位于左上角，另一个位于右上角
背景位置='左上角，右上角'；
}
返回{
backgroundImage:backgroundImageUrls.join（'，'），
背景位置
};
}
}
});
.cardfront图像{
宽度：500px；
高度：100px；
背景重复：无重复；
}



{{mon.ability}}、{{mon.name}、{{mon.id}


我已经考虑过了，但是有15种类型，加上这15种类型中的每一种组合。这需要创建很多类，而且我仍然需要根据数组中的类型交叉引用这些类型，以选择正确的类型。只是做了数学，那就是我要上的105门课。这真的违背了干涸的原则。我看这可能看起来很乏味，但相信我，这是最优雅的，也许更容易走的路。也许你会找到一种在CSS中应用DRY的方法。我从两个源代码（粘贴的团队源代码和一个API调用）中提取它们，以获取pokedex编号（此处不相关）和类型，并将其组合到一个
store.state.team
数组中，该数组包含所有6个对象（团队中每个pokemon有一个对象）。好的，这就更需要处理了。你能编辑你的帖子来展示一个口袋妖怪的JSON对象的结构吗。我试试这个。谢谢你指出箭头函数的东西。这是几个其他帖子和资源的合并。我遇到了
未捕获（承诺中）的TypeError:\u ctx.typeStyle不是一个函数
。我试着把它放在
模板
区域的方括号中，但同样的错误（我甚至不确定这是一个合适的解决方案）@noscodemos你说的方括号是什么意思？您是否在
方法
对象中正确复制并粘贴了函数定义？方括号@
：style=“[typeStyle（mon.types）]”
（自删除后）是的。您不应该这样使用它。用你的基本数据更新了我的答案