微信小程序data动态赋值

1,173 阅读1分钟

现在有个需求,点击图片,展开

1632704050(1).png

1632704058(1).jpg

假设我们的数据是这样的

        {
          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
    })
  },

但是我们发现,在小程序中语法是不通过的

image.png

但是你可以这样写

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
    })
  },