场景：
快应用前端开发中，遇到多次快速点击上下箭头进行切换的button，会有短暂的上下箭头同时出现的情况。
源代码：
<div if="{{!isup}}">
<img src="/Common/img/down.png" />
</div>
<div if="{{isup}}">
<img src="/Common/img/up.png" />
</div>
showMoreApp() {
let self = this
self.isup = !self.isup
}
问题剖析：
经过排查，理论上来说，使用一个开关就可以达到这个目的，但是在QA测试环节，快速多次进行切换上下箭头的图片，就会同时出现。
解决方案：
<div class="{{imgShowStyle}}">
<img class="func-list-left-div-middle-img" src="/Common/img/up.png" />
</div>
增加变量：imgShowStyle: ‘img-show-normal‘
css样式：
.img-show-normal { transform: rotate(360deg); } .img-show-reverse { transform: rotate(180deg); }
Js代码：
showMoreApp() {
let self = this
if(self.imgShowStyle === ‘img-show-normal‘) {
self.imgShowStyle = ‘img-show-reverse‘
} else {
self.imgShowStyle = ‘img-show-normal‘
}
self.isup = !self.isup
}
将原来使用两张图的策略，调整为只使用一张图，然后修改这一张图的css样式，然后那个问题就没有再复现了。
原文：https://www.cnblogs.com/hututu77/p/10928371.html