现在有个需求,点击图片,展开
假设我们的数据是这样的
{
img:"/images/011.png",
message:"全方位服务全方位服务方位服务全方位服务",
isshow:false
},
{
img:"/images/022.png",
message:"快乐詹姆斯",
isshow:false
},
{
img:"/images/033.png",
message:"快乐库里",
isshow:false
},
{
img:"/images/044.png",
message:"快乐库里",
isshow:false
},
{
img:"/images/055.png",
message:"快乐库里",
isshow:false
},
{
img:"/images/066.png",
message:"快乐库里",
isshow:false
},
]
},
我们现在需要做的是 ,控制每一个的isshow,做个if判断,是否显示 那我们页面就需要这么写
拿到每行的index,再拿到每行的ishow
data-index="{{index}}" data-show="{{item.isshow}}">
<view>
<image src="{{item.img}}"></image>
<view wx:if="{{item.isshow}}">
<view class="message-style">{{item.message}}</view>
</view>
</view>
</view>
</view>
在vue里面,我们如果更改的话,我们是可以这样写的
// e.currentTarget.dataset.idnex 索引
// e.currentTarget.dataset.isshow isshow
let index = e.currentTarget.dataset.idnex
this.setData({
dataList[e.currentTarget.dataset.idnex][ishow] : e.currentTarget.dataset.isshow
})
},
但是我们发现,在小程序中语法是不通过的
但是你可以这样写
that.setData({
[`dataList${index}.ishow`]: that.data.dataList[index].num
})
小程序的写法是真的别扭,除了上面那种写法,也可以用下面这种,效率低点
我们用**this.data**,是可以动态的赋值的,那我们可以用this.data.xxx去动态赋值,然后在**this.setdata**中覆盖不就行啦.
所以代码如下
```js
change(e){
// e.currentTarget.dataset.idnex
let index=e.currentTarget.dataset.index
let dataList=this.data.dataList
dataList.map((item,i)=>{
if(i==index){
item.isshow =!item.isshow
}else{
item.isshow =false
}
})
this.setData({
dataList
})
},