1. 程式人生 > >vue 實現點贊

vue 實現點贊

pin true clas method light pre nbsp name body

在v-for循環裏

<ul class="project_content">
			<li v-for="(item, index) in items" :key="index" v-if="index%2==0">
	        	<div class="project_wrap clearfix">
			      <router-link :to="{path:‘/detail‘,query: { id: item.goods_id }}" class=‘project_inner‘>
			        <img :src="item.original_img" class=‘original_img‘>
			      </router-link>
			      <div class="article_name">{{item.article_name}}</div>
			        <div class="article_message">
				        <div class="user_info">
				        	<div class="user_img"><img :src="item.user_img" ></div>
				          <span class="user_name">{{item.user_name}}</span>
				        </div>
			          <div class="article_likes" @click="dolikes(index)"><span v-bind:class="[item.likesbefore? ‘likesbefore‘:‘likesafter‘]"></span><span class="likes" v-bind:class="[item.likesbefore ? ‘gray‘:‘pink‘]">{{item.likes}}</span></div>
			        </div>
			  	</div>
      		</li>
		</ul>

  

函數帶上index

methods: {
//時間操作函數執行
dolikes(index){
  console.log(this.items[index])
  this.items[index].likes = this.items[index].likesbefore ?parseInt(this.items[index].likes) +1:parseInt(this.items[index].likes) -1
  this.items[index].likesbefore=!this.items[index].likesbefore;
  console.log(this.items[index].likesbefore)
  }

vue 實現點贊