vue 动态绑定 点击事件(匿名函数)
遇到一个问题,一个点击方法在v-for里的一个元素上,由于该方法需要处理本次循环的数据并影响本次循环的其他元素,所以暂时没有想到可以把方法声明在vue的methods里的方法,所以就直接写在了元素上:<view@click="function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}"&
·
更新:
现在看当时的解决方法挺蠢的,直接修改绑定数组的值就好了,但是这种写法对我来说还是挺新鲜的,记录下.
遇到一个问题,一个点击方法在v-for里的一个元素上,由于该方法需要处理本次循环的数据并影响本次循环的其他元素,所以暂时没有想到可以把方法声明在vue的methods里的方法,所以就直接写在了元素上:
<view @click="function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}">
<view style="width: 50vw;" >回收物品</view>
<view style="color: red;">¥{{order.total}}</view>
<image v-if="order.createTime!=-1&&order.appointOrderProductNames.length!=0&&order.appointOrderProductNames.length!=0" src="../../static/image/arrow.png"></image>
<image v-if="order.createTime==-1&&order.appointOrderProductNames.length!=0" src="../../static/image/arrowDown.png"></image>
</view>
后来有了新的想法,需要按需出现点击事件,网上查到的方法是这样的
@click="clickFlag && addGoodsHandler()"
我尝试了这样:
@click="order.appointOrderProductNames.length!=0&&function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}}"
并不行,于是展开思考:
本来@clik只是写上方法的名字,仅在这一时间不涉及运行,点击事件触发,vue根据函数名去调用函数,所以将匿名函数写上去就行了,与写上函数名同理,事件触发页面自然会调用,但是网上查到的方法则不同:短路与操作,前面执行通过则执行后面的,这也是根本的不同:原本的写法不需要执行,但现在需要其在通过短路与后直接执行后面的方法,所以自然而然地想到了回调函数:
@click="order.appointOrderProductNames.length!=0&&(function(){if(order.createTime!=-1){order.createTime=-1;}else{order.createTime=1}})()"
测试一下,没有问题,小功告成.
更多推荐
已为社区贡献1条内容
所有评论(0)