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

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

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

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

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

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

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: "我是標題",
? ? 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: "我是標題",
? ? 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: "我是標題",
? ? titlepic: "/static/2956568.jpg",
? ? support: {
? ? ? type: "", //無操作
? ? ? support_count: 1,
? ? ? unsupport_count: 2
? ? },
? ? comment_count: 2,
? ? share_num: 2
? }]

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

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

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

父組件中接收：

邏輯是：

拿到當前對象：let item = this.list[e.index]

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

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

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

// 頂踩操作
doSupport(e) {
? ? ? ? // 拿到當前對象
? ? ? ? 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
? ? ? ? }
? ? ? },

如此，文章的點贊與差評的代碼已完成。

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

您可能感興趣的文章: