:style动态绑定，但只要页面发生变化就会执行一次方法

本文主要是介绍: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)})}});

这篇关于:style动态绑定，但只要页面发生变化就会执行一次方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---