快捷導航

vue實現(xiàn)靜態(tài)頁面點贊和取消點贊功能

更新時間：2022年02月24日 13:33:17 作者：百事可口

這篇文章主要為大家詳細介紹了vue實現(xiàn)靜態(tài)頁面點贊和取消點贊的功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)靜態(tài)頁面點贊和取消點贊的具體代碼，供大家參考，具體內(nèi)容如下

效果如下：

點擊之后點贊數(shù)量+1，紅心亮
再次點擊，點贊數(shù)量-1，紅心滅

邏輯：

由于列表是動態(tài)渲染的（for），數(shù)據(jù)是mock隨機生成，所以綁定點擊事件時，應(yīng)該把當前下標和item的id都傳到事件上，在data里面聲明空數(shù)組，用來存放已經(jīng)點擊的id，
點贊點擊事件觸發(fā)，先進行判斷，
1.當前data內(nèi)的數(shù)組是否有這個點擊的id，用indexof方法查找，如果找不到，執(zhí)行點贊功能，數(shù)量+1，紅心樣式取反，最重要的是將當前點贊的id存到data的數(shù)組里 push進去。
2.反之找到了，就將他數(shù)量-1，心取消。
for遍歷data的數(shù)組，目的是為了找到當前點擊的id的下標，找到后，直接利用splice刪除的放法，splice（i，1）第一個參數(shù)為下標，第二個刪除一個，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) {
? ? ? ? // 沒找到
? ? ? ? // 執(zhí)行點贊功能
? ? ? ? this.foodMeishi[index].dianzan += 1;
? ? ? ? // 加到數(shù)組中
? ? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: