vue 實現點贊
阿新 • • 發佈:2018-01-29
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 實現點贊