How to realize the function of giving likes and canceling likes on static pages by vue

This article editor for everyone to introduce in detail "vue how to achieve static page like and cancel like function", detailed content, clear steps, details handled properly, I hope that this "vue how to achieve static page like and cancel like function" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

The effect is as follows:

After clicking, the number of likes + 1, Hongxinliang

Click again, the number of likes-1, the heart dies

Logic:

Since the list is for and the data is randomly generated by mock, when you bind a click event, you should upload both the current subscript and the id of item to the event and declare an empty array in data to store the id that has been clicked.

The like click event is triggered and the judgment is made first.

1. Use the indexof method to find out whether there is a clicked id in the array in the current data. If it cannot be found, perform the like function, the number is + 1, the red heart style is reversed, and the most important thing is to store the current like id in the data array push.

two。 On the contrary, if you find it, you will cancel the number of him-1.

For traverses the array of data in order to find the subscript of the id currently clicked. After finding it, it directly uses the placement method deleted by splice. The first parameter of splice (iPower1) is the subscript, and the second one is deleted. The vue component code is as follows:

{{item.headName}}

{{item.content}}   {{item.dianzan}}  {{item.pinglun}} export default {props: ["foodMeishi"], data () {return {zanListId: [1,2],} }, methods: {dianzan (index, id) {let list = this.zanListId; if (list.indexOf (id) = =-1) {/ / not found / / execute the like function this.foodMeishi.dianzan + = 1; / / add this.zanListId.push (id) to the array; this.foodMeishi.xin =! } else {/ / cancel likes of this.foodMeishi.dianzan-= 1; this.foodMeishi.xin =! this.foodMeishi.xin; for (var i in this.zanListId) {if (this.zanListId [I] = = id) {this.zanListId.splice (I, 1);}},},} After reading this, the article "how to realize the function of giving likes and canceling likes on vue static pages" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.