正如标题中所述,我试图做css所做的,但在JS中,只使用一个项目的Map数组中的一个项目的索引,每个项目得到一个索引号。
computed: {
parsedItems() {
return this.items?.map((obj, index) => {
return {
...obj,
}
})
}
}
为了更好地理解,我将试着解释我为什么这样做。
我正在构建一个包含一些数据(图像,标题,uri,一些文本等)的块网格,我想获得:nth-child(7 n + 1)的功能,显然一直到+ 7。但是使用JS,框架是vue 2。
解析的项目在obj中有图像,一个自定义组件正在使用这些图像,该自定义组件用于处理各种图像,包括图像的纵横比。该组件只是从图像的高度除以宽度得到结果,并使用该数字来设置宽高比。
经过广泛的研究,我了解了nth-child在css中的工作原理,:nth-child(3n + 3)
看起来像这样的幕后:
(3 x 0) + 3 = 3 = 3rd Element
(3 x 1) + 3 = 6 = 6th Element
(3 x 2) + 3 = 9 = 9th Element
etc.
我试着做的是下面的,最明显的是把index乘以7,然后加上1到7。像这样:
computed: {
parsedItems() {
return this.items?.map((obj, index) => {
return {
...obj,
aspectRatio:
7 * index + 1 === 1
? someAspectRatio
: 7 * index + 2 === 9
? someAspectRatio
...etc
}
})
}
}
这里的问题是map方法没有在7处停止,然后再次从1开始,所以这失败了。而且,数学也不符合我的需要。第二次尝试使用模/余数运算符“%”。
computed: {
parsedItems() {
return this.items?.map((obj, index) => {
return {
...obj,
aspectRatio:
index % 7 === 0
? someAspectRatio
: index % 3 === 0
? someAspectRatio
: index % 2 === 0
? someAspectRatio
: someAspectRatio
}
})
}
}
我发现这更接近但还不够接近,因为随着项目数量的增加,模块结果开始混淆。
1条答案
按热度按时间1hdlvixo1#
最简单的方法是使用
for
而不是map()
。CSS参考
:nth-child(eachIndex*n + startIndex)
下面是一个例子: