扬州建设工程信息网站网页设计与制作项目教程

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)})}});