:style动态绑定

1、问题

开发过程中有个需求是遍历列表绘制div,div的样式是后端接口传来的，一开始这种写法，：style=“formatStyle(item)”，写在了模板中

这样写发现一个问题，只要页面发生重绘，比如页面输入框输入数字，formatStyle
会重复执行，太耗性能

2、解决

在拿到列表数据时给列表每个对象加个iStyle属性

  <div v-for="item in copylayerList" :key="item.id">
                                <div class="layer_div" :style="item.iStyle" @click="editLaywer(item)">
                                    <span class="layer_div_text">{{item.name}}</span>
                                </div>
                            </div>

我这里是访问接口拿到数据后，遍历数组给数组对象添加属性

    http
                    .get("/XXX", this.listQuery)
                    .then((res) => {
                        if (res.code == 200) {

                            this.copylayerList = [...res.data.list];
                            this.copylayerList.map((item) => {
                                item.iStyle = this.formatStyle(item)
                            })
                          
                        }
                    });