vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊功能
本文實(shí)例為大家分享了vue實(shí)現(xiàn)靜態(tài)頁面點(diǎn)贊和取消點(diǎn)贊的具體代碼,供大家參考,具體內(nèi)容如下
效果如下:
點(diǎn)擊之后 點(diǎn)贊數(shù)量+1,紅心亮
再次點(diǎn)擊,點(diǎn)贊數(shù)量-1,紅心滅
邏輯:
由于列表是動(dòng)態(tài)渲染的(for),數(shù)據(jù)是mock隨機(jī)生成,所以綁定點(diǎn)擊事件時(shí),應(yīng)該把當(dāng)前下標(biāo)和item的id都傳到事件上,在data里面聲明空數(shù)組,用來存放已經(jīng)點(diǎn)擊的id,
點(diǎn)贊點(diǎn)擊事件觸發(fā),先進(jìn)行判斷,
1.當(dāng)前data內(nèi)的數(shù)組是否有這個(gè)點(diǎn)擊的id,用indexof方法查找,如果找不到,執(zhí)行點(diǎn)贊功能,數(shù)量+1,紅心樣式取反,最重要的是將當(dāng)前點(diǎn)贊的id存到data的數(shù)組里 push進(jìn)去。
2.反之找到了,就將他數(shù)量-1,心取消。
for遍歷data的數(shù)組,目的是為了找到當(dāng)前點(diǎn)擊的id的下標(biāo),找到后,直接利用splice刪除的放法,splice(i,1)第一個(gè)參數(shù)為下標(biāo),第二個(gè)刪除一個(gè),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"></i> ? ? ? ? ? <i class="iconfont" v-else></i> ? ? ? ? ? <span>{{ item.dianzan }}</span> ? ? ? ? </div> ? ? ? ? <div class="pinglun"> ? ? ? ? ? <i class="iconfont"></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í)行點(diǎn)贊功能 ? ? ? ? this.foodMeishi[index].dianzan += 1; ? ? ? ? // 加到數(shù)組中 ? ? ? ? this.zanListId.push(id); ? ? ? ? this.foodMeishi[index].xin = !this.foodMeishi[index].xin; ? ? ? } else { ? ? ? ? // 取消點(diǎn)贊 ? ? ? ? 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 解決vue-seamless-scroll滾動(dòng)加點(diǎn)贊銜接處數(shù)據(jù)不同步問題
- Vue transition實(shí)現(xiàn)點(diǎn)贊動(dòng)畫效果的示例
- Vue+Bootstrap收藏(點(diǎn)贊)功能邏輯與具體實(shí)現(xiàn)
- vue實(shí)現(xiàn)直播間點(diǎn)贊飄心效果的示例代碼
- vue組件之間通信實(shí)例總結(jié)(點(diǎn)贊功能)
- VUE利用vuex模擬實(shí)現(xiàn)新聞點(diǎn)贊功能實(shí)例
- vue開發(fā)實(shí)現(xiàn)評(píng)論列表
- vue實(shí)現(xiàn)評(píng)論列表
- Vue實(shí)現(xiàn)簡(jiǎn)單的發(fā)表評(píng)論功能
- vue實(shí)現(xiàn)文章點(diǎn)贊和差評(píng)功能
相關(guān)文章
基于Vue3.0開發(fā)輕量級(jí)手機(jī)端彈框組件V3Popup的場(chǎng)景分析
這篇文章主要介紹了基于Vue3.0開發(fā)輕量級(jí)手機(jī)端彈框組件V3Popup,本文通過場(chǎng)景分析給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12element plus中el-upload實(shí)現(xiàn)上傳多張圖片的示例代碼
最近寫項(xiàng)目的時(shí)候需要一次上傳多張圖片,本文主要介紹了element plus中el-upload實(shí)現(xiàn)上傳多張圖片的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue2.0 兄弟組件(平級(jí))通訊的實(shí)現(xiàn)代碼,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-01-01vue3?使用setup語法糖實(shí)現(xiàn)分類管理功能
這篇文章主要介紹了vue3?使用setup語法糖實(shí)現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實(shí)現(xiàn)一個(gè)新聞?wù)镜暮笈_(tái)分類管理模塊,其中新增、編輯采用對(duì)話框方式公用一個(gè)表單,需要的朋友可以參考下2022-08-08