vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能

更新時(shí)間：2022年04月14日 14:30:30 作者：每一份筆記都是美好回憶

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue實(shí)現(xiàn)文章點(diǎn)贊和差評功能的具體代碼，供大家參考，具體內(nèi)容如下

純前端實(shí)現(xiàn)文章點(diǎn)贊與差評（支持與不支持）。

需求：狀態(tài)1：用戶沒有操作過，即既沒點(diǎn)贊和差評；狀態(tài)二：用戶點(diǎn)贊過；狀態(tài)三：用戶差評過。點(diǎn)贊或差評過后無法取消，可切換。如下圖：

dom結(jié)構(gòu)：

<!-- 頂 -->
? ? ? <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
? ? ? ? @click="DoSupport('support')" :class="item.support.type === 'support'? 'support-active':''">
? ? ? ? <text class="iconfont icon-dianzan2 mr-2"></text>
? ? ? ? <text>{{item.support.support_count}}</text>
? ? ? </view>
? ? ? <!-- 踩 -->
? ? ? <view class="flex-1 flex ai-center jc-center animate__animated animate__fast" hover-class="animate__jello text-main"
? ? ? ? @click="DoSupport('unsupport')" :class="item.support.type === 'unsupport'? 'support-active':''">
? ? ? ? <text class="iconfont icon-cai mr-2"></text>
? ? ? ? <text>{{item.support.unsupport_count}}</text>
</view>

list數(shù)據(jù)：

const demo = [{
? ? username: "昵稱",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "support", //支持
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }, {
? ? username: "昵稱",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "unsupport", //不支持
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }, {
? ? username: "昵稱",
? ? userpic: "/static/tabber/indexSelected.png",
? ? newstime: "2021-1-1 下午1：00",
? ? isFollow: false,
? ? title: "我是標(biāo)題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "", //無操作
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }]

list數(shù)組每個(gè)item定義了一個(gè)type，當(dāng)type為support則為支持；當(dāng)type為unsupport則為不支持；當(dāng)type為空時(shí)則為無操作。

點(diǎn)擊方法：點(diǎn)擊之后子組件通知父組件并傳遞點(diǎn)擊的是哪篇文章（index），點(diǎn)擊的是贊還是踩（支持還是不支持）

// 頂踩操作
DoSupport(type) {
? ? ? ? // 通知父組件
? ? ? ? this.$emit('doSupport', {
? ? ? ? ? type: type,
? ? ? ? ? index: this.index
? ? ? ? })
}

父組件中接收：

邏輯是：

拿到當(dāng)前對象：let item = this.list[e.index]

1.如果是之前沒有操作過，則改變它的type，并讓它的相對應(yīng)的count加1；

2.如果是之前頂過，現(xiàn)在點(diǎn)踩，那么則改變它的type為unsupport，并讓頂?shù)腸ount數(shù)減一同時(shí)踩的count數(shù)加一；

3.如果是之前踩過，現(xiàn)在點(diǎn)贊，那么則改變它的type為support，并讓頂?shù)腸ount數(shù)加一同時(shí)踩的count數(shù)減一；

// 頂踩操作
doSupport(e) {
? ? ? ? // 拿到當(dāng)前對象
? ? ? ? let item = this.list[e.index]
? ? ? ? // 之前沒有操作過
? ? ? ? if (item.support.type === '') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? item.support[e.type + '_count']++
? ? ? ? ? return
? ? ? ? }
? ? ? ? // 之前頂過
? ? ? ? if (item.support.type === 'support' && e.type === 'unsupport') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? // 踩+1
? ? ? ? ? item.support.unsupport_count++
? ? ? ? ? // 頂-1
? ? ? ? ? item.support.support_count--
? ? ? ? ? return
? ? ? ? }
? ? ? ? // 之前踩過
? ? ? ? if (item.support.type === 'unsupport' && e.type === 'support') {
? ? ? ? ? item.support.type = e.type
? ? ? ? ? // 頂+1
? ? ? ? ? item.support.support_count++
? ? ? ? ? // 踩-1
? ? ? ? ? item.support.unsupport_count--
? ? ? ? ? return
? ? ? ? }
? ? ? },

如此，文章的點(diǎn)贊與差評的代碼已完成。

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

您可能感興趣的文章: