Question

vue里用v-for循环出来的图片在:style重新赋值backgroundPosition的值

<li v-for="(item, index) in demoList" :key="index">
<span :style="{backgroundImage: 'url(' + item.bgImg+ ')',
backgroundPositionX: index*-32 + 'px',
backgroundPositionY: index*-32 + 'px'}"></span>
</li>
上面这个图片循环出来后关于计算定位的问题，每循环出来一个图片我就要通过下标值就要给（backgroundPositionX）重新赋予一个没有规律的值，请问老师这个怎么做

Answer 1

可以用随机数函数，比如
：style="{
backgroundPosition:
(100/demoList.length*index) + '% ' +
(Math.random()*(100-100/demoList.length*(index+1))+(100/demoList.length*index)) + '%'
}"

至于用什么方式产生合理的随机数，要自己慢慢尝试和选择，上面例子只是做了一个演示，抛砖引玉而已。

追问

我是要对每个图片的backgroundPosition 赋予已知的值，UI给的集成图片是不能随便给值的谢谢，请看懂在答

追答

那就把每个图片特定的位置加入数据数组，比如
demoList: [
{
img: '...png',
pos: {x: 20, y: 32}
}
]

在视图里
:style="{
backgroundPosition: item.pos.x + 'px ' + item.pos.y + 'px'
}"