vue实现静态页面点赞和取消点赞功能

<template>
  <div v-if="foodMeishi">
    <div
      class="food-box-content"
      v-for="(item, index) in foodMeishi"
      :key="item.id"
    >
      <img class="food-photo" :src="item.foodphotoUrl" alt="" />
      <div class="head">
        <img :src="item.headImg" alt="" />
        <p class="head-name">{{ item.headName }}</p>
      </div>
      <div class="food-content">
        {{ item.content }}
      </div>
      <div class="food-bottom">
        <div class="xin" @click="dianzan(index, item.id)">
          <i class="iconfont " v-if="item.xin">&#xe607;</i>
          <i class="iconfont" v-else>&#xe68b;</i>
          <span>{{ item.dianzan }}</span>
        </div>
        <div class="pinglun">
          <i class="iconfont">&#xe603;</i>
          <span>{{ item.pinglun }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["foodMeishi"],
  data() {
    return {
      zanListId: [1, 2],
    };
  },
  methods: {
    dianzan(index, id) {
      let list = this.zanListId;
      if (list.indexOf(id) == -1) {
        // 没找到
        // 执行点赞功能
        this.foodMeishi[index].dianzan += 1;
        // 加到数组中
        this.zanListId.push(id);
        this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
      } else {
        // 取消点赞
        this.foodMeishi[index].dianzan -= 1;
        this.foodMeishi[index].xin = !this.foodMeishi[index].xin;
        for (var i in this.zanListId) {
          if (this.zanListId[i] == id) {
            this.zanListId.splice(i, 1);
          }
        }
      }
    },
  },
};
</script>