vue利用v-for循環時怎么只處理點擊的那個元素


   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里的參數,然后傳給后台,后台把數據返回給我們。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com