【uniapp】原生小程序以及uniapp中如何获取v-for列表中点击行的信息，以及改变每个点击的样式_uniapp获取v-for的其中一个值

大概就是这个效果，改变颜色不太够，变化效果很离谱的时候得两张图。

先看原生小程序中如何实现：

1.获取点击的是哪个循环中的列表：

 <view class="set_list" wx:for="{{paymentDeal}}"
 
 wx:for-item="item" wx:for-index="index" wx:key="index"
 
                           //获得循环的下标index
    bindtap="change_color" data-index='{{index}}'>
 
</view>

点击事件：change_color

 
data:{
 
  myclick:0,
  // 选中图标
  selt:'../../images/myIcon/phoneset.png',
  //未选中图标
  noselt:'../../images/myIcon/nophoneset.png'
 
}
 
 
 ...
 
 change_color(e){
    console.log("click me");
    // let click = e.currentTarget.dataset.index
    console.log(this.data.myclick);
    this.setData({
      myclick:e.currentTarget.dataset.index
    })
 
  },

通过点击的index值与下标对比如果相等，就能进行下一步更换图片。log一下myclick，已经能拿到点击的是哪一个了。

 点击切换部分：

  <view class="set_list" wx:for="{{paymentDeal}}"
 
 wx:for-item="item" wx:for-index="index" wx:key="index"
 
    bindtap="change_color" data-index='{{index}}'>
    
    //三元运算符  如果点击的index等于myclick 使用selt 不等于使用noselt
    <image src="{{myclick==index?selt:noselt}}"></image>
 
    {{index}} -- {{myclick}}
 
  </view>
</view>

选中的小圆点变成红色，两张图片一张灰色一张红色。

 {{index}} -- {{myclick}}    

点击后：

 还有一个class样式的三元运算符写法：

   <!-- <view class="{{showimg==1?'youclass':''}}" > -->

 下边两张图为uniapp写法：

<view class="pageItem" v-for="(item, index) in [1, 2, 3, 4, 5, 7, 8]"
//三元运算符写法  第一种本身带样式，第二种样式二选一
//:class="['touch_item', item.isTouchMove ? 'touch_move_active' : '']"
:class="currentIndex == index ? 'pageItemActive' : ''" :key="index" 
//点击时把item的值传进去(item)
@click="changepage(item)">
 
		{{ item }}
 
</view>

changepage(item){
 
	console.log(item);
	console.log('点击的是'+item);
				
	}

 

 效果一样，下面存两张图。

---