Vue实现静态页面点赞和取消的具体代码，

本文实例为你们分享了Vue实现静态页面点赞和取消点赞的具体代码，供你们参考，具体内容如下

效果如下：

点击然后 点赞数目+1，红心亮

再次点击，点赞数目-1，红心灭

逻辑：

由于列表是动态渲染的（for），数据是mock随机生成，所以绑定点击风波时，应该把当前下标和item的id都传到风波上，在data上面申明空链表，用来储存早已点击的id网页点赞，

点赞点击风波触发网页点赞，先进行判定，

1.当前data内的字段是否有这个点击的id，用indexof方式查找，如果找不到，执行点赞功能，数量+1，红心式样取反，最重要的是将当前点赞的id存到data的字段里 push进去。

2.反之找到了，就将他数目-1，心取消。

for遍历data的字段，目的是为了找到当前点击的id的下标，找到后，直接借助splice删掉的放法，splice（i，1）第一个参数为下标，第二个删掉一个，vue组件代码如下：

以上就是本文的全部内容，希望对你们的学习有所帮助，也希望你们多多支持编程网。