如果使用v-for的方式來循環(huán)遍歷生成li，那么你在li上面注冊的事件都會是同一個事件，這顯然不是我們想要的。這樣會造成一個問題，就是當我們點擊一個li的時候，因為所有的Li綁定的都是同一個事件，所以這里事件的回調(diào)函數(shù)都會觸發(fā)，但是我們又不可能給每一個li都綁定一個不同的事件，因為我們不知道有多少個li，而且這樣代碼會比較冗雜。

所以，理想的狀態(tài)是，就注冊一個事件，所有l(wèi)i公用一個事件處理函數(shù)，然后我們把事件中所有的數(shù)據(jù)綁定都綁定到item，就是當前遍歷的那一個對象上，把這個對象傳給事件處理函數(shù)，根據(jù)item來區(qū)分不同的Li。

現(xiàn)在有一個需求，需要使用列表循環(huán)來渲染視圖，列表的每一項都有點贊和收藏的功能，當點擊收藏，圖標變紅，表示已收藏，當點擊贊的時候，圖標變紅，點贊數(shù)+1，當然每個li需要有自己的點贊數(shù)，不能相互影響。

template

<ul>
  <li class="topicalList-item" v-for="(item, idx) in list" :key="idx">
    <van-row>
      <van-col>
        <img v-if="!item.avatar.length" class="topicalList-item-avatar" src="../../assets/img/default-avatar.png" alt="">
        <img v-if="item.avatar.length" class="topicalList-item-avatar"  :src="item.avatar" alt="">
      </van-col>
      <van-col>
        <span>{{ item.name.length? item.name: '匿名'}}</span>
        <i class="topicalList-item-tag" v-if="item.tag.length">
          {{ item.tag.length? item.tag: '' }}
        </i>
        <p>{{ item.time }}</p>
      </van-col>
    </van-row>
    <h4>{{ item.title }}</h4>
    <h5>{{ item.content }}</h5>
    <van-row class="topicalList-item-bottom">
      <!-- 收藏=============================== -->
      <van-col span="8">
        <img
        src="../../assets/img/start-k.png"
        v-if="!item.collection"
        :class="{'clickAnimate': item.animateStyle === 'start'}"
        @click="clickStart(item)">
        <img
        src="../../assets/img/start.png"
        v-if="item.collection"
        :class="{'clickAnimate': item.animateStyle === 'start-cancel'}"
        @click="cancelStart(item)">
        <i>收藏</i>
      </van-col>

      <van-col span="8" class="topicalList-item-chart">
        <img src="../../assets/img/chart.png" alt="">
        <i>{{ item.chartNum }}</i>
      </van-col>

      <!-- 點贊=============================== -->
      <van-col span="8" class="topicalList-item-zan">
        <img
        v-if="!item.zan"
        src="../../assets/img/good-k.png"
        :class="{'clickAnimate': item.animateStyle === 'good'}"
        @click="clickZan(item)">
        <img
        v-if="item.zan"
        src="../../assets/img/good.png"
        :class="{'clickAnimate': item.animateStyle === 'good-cancel'}"
        @click="cancelZan(item)">
        <i>{{ item.zanNum }}</i>
      </van-col>
    </van-row>
  </li>
</ul>

js

<script>
  let list = [
    {
      id: 1,
      name: '',
      tag: '',
      avatar: '',
      time: '2019-08-07 09:29:58',
      title: '第三個測試',
      content: '這是一個測試內(nèi)容',
      chartNum: '120',
      zanNum: '201',
      zan: false,
      collection: false,
      animateStyle: '',
    },
  ]
  export default {
    data: function () {
      return {
        value: '',
        activeName: '',
        activeStyle: 'all',
        topicShow: 'allTopic',
        list,
      }
    },
    methods: {
      // 點擊收藏
      clickStart: function (item) {
        item.animateStyle = 'start'// 控制動畫
        setTimeout(() => {
          item.collection = !item.collection // 控制顯示空心還是紅心
        }, 600)
      },
      // 取消收藏
      cancelStart: function (item) {
        item.animateStyle = 'start-cancel'
        setTimeout(() => {
          item.collection = !item.collection
        }, 600)
      },
      // 點贊
      clickZan: function (item) {
        item.animateStyle = 'good'
        item.zanNum++  // 每個li都有自己的點贊數(shù)
        setTimeout(() => { // 這里的括號不能傳item,否則就是undefined
          item.zan = !item.zan
        }, 600)
      },
      // 取消贊
      cancelZan: function (item) {
        item.animateStyle = 'good-cancel'
        item.zanNum--
        setTimeout(() => {
          item.zan = !item.zan
        }, 600)
      }
    },
  }
</script>

當然這只是我能夠想到的一種方式，大家可以參考一下。如果有更好的實現(xiàn)方式，小伙伴們可以在下方留言。樣式部分寫的比較亂，就不放上去了。