码迷,mamicode.com
首页 > 其他好文 > 详细

vue 实现点赞

时间:2018-01-29 18:23:36      阅读:1050      评论:0      收藏:0      [点我收藏+]

标签:pre   htm   bsp   info   blog   循环   name   log   before   

在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 实现点赞

标签:pre   htm   bsp   info   blog   循环   name   log   before   

原文地址:https://www.cnblogs.com/zhoubingyan/p/8378660.html

(7)
(9)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!