vue3点赞与踩逻辑

vue开发项目中，有很多页面需求点击改变文本颜色或背景颜色的点击事件；

这里如需用到标可以先引入；

1.静态布局

1.1.当引入图标完成后我们应该先进行静态页面的布局

<div class="estimate">
            <div
              class="upvote"
              @click="onLike(item.id)"//点击事件，因为这里说是用v-for循环渲染的，所以传id的时候也是同理
              :class="{ active: item.isLikeActive }"
            >
              <i class="iconfont icon-dianzan"></i> // 图标
              <span>{{ item.thumbsup }}</span> //点赞数量
            </div>
            //下面是踩的与上面同理
            <div
              class="disapprove"
              @click="dislike(item.id)" 
              :class="{ active: item.isDislikeActive }"
            >
              <i class="iconfont icon-cai"></i>
              踩
            </div>
          </div>

1.2.css 

.estimate {
        display: flex;
        .upvote,
        .disapprove {
          padding: 6px 8px;
          font-size: 1rem;
          cursor: pointer;
          vertical-align: middle;
          .icon {
            vertical-align: middle;
          }
          &:hover {
            color: #ccc;
          }
        }
      }

1.3.完成上面两个步奏后 效果图为

2.根据上面两个步奏我们已经完成静态的布局，接下来我们需要完成的是js里面的功能

由于我这里使用了setup语法糖，可根据不同语法不同更改

2.1创建一个对象

const tableData = reactive([
  {
    thumbsup: 44,
    stepon: 44,
    isLikeActive: false,
    isDislikeActive: false
  }
])

 我这里的四条数据只是掩饰一下，真实中应该这样写,多个数据通过for遍历

const tableData = reactive([
  {
    id: 1,
    title: '学洗',
    image:
      'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    date: '2016-05-03',
    name: 'Tom',
    address:
      'No. 189, Grove St, Los Angeles111111111111111111111111111111111111111111111111111111111111',
    thumbsup: 44,
    stepon: 44,
    isLikeActive: false,
    isDislikeActive: false
  },...
])

2.2我们数据跟都准备好了，接下来就要完成点击事件，大家可以看看上面写静态的时候，已经绑定了点击事件，所以我们只需要完成js功能就可以了

// 点赞逻辑
const onLike = (id) => {
  tableData.forEach((item) => {
    if (item.id === id) {
      item.isLikeActive = !item.isLikeActive
      if (item.isLikeActive) {
        item.thumbsup++
        item.isDislikeActive ? item.stepon-- : item.stepon
        item.isDislikeActive = false // 与下面一样由于代码是从上到下执行如果这句话在上面执行三元表达式 则不会执行
      } else {
        item.thumbsup--
      }
      return
    }
  })
}
// 踩逻辑
const dislike = (id) => {
  tableData.forEach((item) => {
    if (item.id === id) {
      item.isDislikeActive = !item.isDislikeActive
      if (item.isDislikeActive) {
        item.stepon++
        item.isLikeActive ? item.thumbsup-- : item.thumbsup
        item.isLikeActive = false
      } else {
        item.stepon--
      }
      return
    }
  })
}