vue利用v-for循环时怎么只处理点击的那个元素

来源:互联网 发布:笔记本主板交换 知乎 编辑:程序博客网 时间:2024/05/23 15:41

   111,,,,

<div class="all">全部评论</div>

                    <textarea :placeholder="'已有'+data.pinglun+'条评论,快来说说你的'" @keyup.13="submit123($event)"  class="replaycontent"></textarea>
            <div class="fbjbox2">
               <pull up="true" down="true" @up="next" @down="shuaxin" ref="pull">
                  <div v-for="item in db" >
                   <div class="zce">
                    <img :src="item.head_url"  class="man"/>
                    <div class="cont">
                         <h5>{{item.vname}}</h5>    
                         <h4>{{item.content}}</h4>
                         <div class="mui-clearfix comment_end">
                             <span class="mui-pull-left">{{item.rtime|timeago}}</span>  //发布评论的时间这里的timeago是一种时间filter过滤器,把时间换成距离现在多久的时间。
                             <span class="mui-pull-right" style="padding-left:20px;width:70px;display:inline-block"><img src="img/3.png"  width="18px" @click="zanComment(item,$event)"/>{{item.zancount}}</span>
                         </div>
                  </div>
                 </div>
                 </div>
               </pull>

           </div>

     </div>


//开始是浅色的图标。点击赞的时候,前面的图标换成深色的31.png。然后点赞的数量加1.

methods:{

   zanComment(db,e){

      var img=$(e.srcElement).attr("src");//指的就是当前的那个元素的src属性

 

        if(img=="img/3.png"){   //如果还是没有点击的效果。点击以后先评论数加1再改变图片
                     db.zancount++; //db.xxxx就是这个点击的

        $(e.srcElement).attr("src",'img/31.png');    }

    }

}


}





222、、、

 <ul class="mui-table-view" v-for="item in list">
            <li class="mui-table-view-cell" @tap="link({id:item.goods_id})">  //跳转到指定页面根据这个图片的id
               <a class="mui-navigate-right">
                   <img class="mui-pull-left img" :src="imgroot+item.goods_image"/>
                    <div class="mui-media-body">      

                        <h4 >{{item.goods_name}}</h4>
                        <p class="red1">¥{{item.goods_price}}</p>
                    </div>
                
             </a>
            </li>
        </ul>


methods:{

   link(db){

   this.$router.push({name:'商品详情',params:{id:db.id,uid:localstorage.getItem('uid')}})//把内容传给商品详情的页面

  }

}



下面是商品详情页面的js

 mounted() {
            this.$api("Mp/goodsDetail", {goods_id: this.$route.params.id }).then(obj => {});  //红色的字获取的就是上个页面的params里的参数,然后传给后台,后台把数据返回给我们。

0 1
原创粉丝点击