vue v-for多条数据使用动态css

上图，我这里使用了数组方式实现css绑定

在这里我要通过计算设置图一的width宽度。当然，数据每个算出来的宽度是不同的。

页面输出内容

但这种方式最后效果每个button的宽度设置的都是我循环计算出最后一个的宽度。没有达到预期效果。

这里也换成数组或者json的形式例如：
this.width[i].width=xxxx+"px";
遍历时width[index]去取。

将计算后的width也放在serviceList.subscribe里面，
for(let i in sub){
...
i.postre = Math.round(widpx)
}
页面上用:style="[width,item.postre]"

基于问题表述
1.首选要知道是一个list列表
2.列表的意义就是一个循环的数组结构
3.你的button就是一个数组对象，要对每一个button做处理，就相当于你的width 跟prostre也应该是一个数组
4.这样每次拿到父级循环的index的索引值 用这个index去设置 width跟prostre 对应的索引的值 然后返回这个值即可

祝好 如有帮助 望采纳 点赞 谢谢