我们先来看一下背景：

这个是一个列表页面，需要实现的是，对应的商品数量可以修改的，那么也就是我点击上面的+

号的时候，数量依次递增
我们先来分析一下，这两行商品是通过数组渲染的，点击加号修改的数量，其实是修改的数组中的元素，并且我们还需要确定修改的数组的那一行的元素

我们来看列表代码：

    <checkbox-group bindchange="checkboxChange">
      <view wx:for="{{goodsList}}" wx:for_item="item" wx:key="index" class="goods_item">
            <checkbox value="{{item.rowguid}}" style="position: relative;top: -45px;"></checkbox>
            <image src="{{item.picurl}}" lazy-load="true" mode="heightFix" ></image>
            <text class="goods_title">{{item.goodsname+"..."}}</text>
            <text class="goods_ggxh">{{item.ggxhname}}</text>
            <text class="goods_price">￥{{item.buyprice}}</text>
            <view class="goods_addnum">
              <button size="mini" data-index="{{index}}" bindtap="subBookNum">-</button>
                 <input class="ggxh_num_input" type="number" value="{{item.buynum}}"> {{item.buynum}} </input>
              <button size="mini" data-index="{{index}}" bindtap="addBookNum">+</button>
            </view>
     </view>
  </checkbox-group>

<button size="mini" data-index="{{index}}" bindtap="addBookNum">+</button>

这个是点击+号对应的按钮，增加一个属性data-index ="{{index}}"  这个是数组的行索引，当点击按钮的时候，我知道需要对数组那一行的元素进行 更新

对应的事件：addBookNum

addBookNum:function(e){
   let index=e.currentTarget.dataset.index;
   let buynum=this.data.goodsList[index].buynum;
   let f = 'goodsList[' + index + '].buynum'
   this.setData({
      [f]:buynum+1
  })
},

可以看出的是，当点击+号按钮的时候，首先是获取到当前点击行的索引，然后获取到数组中对应的元素，并获取到当前的数量，最后对数量进行更新

响应的点击-号，也是这样进行操作

代码：

subBookNum:function(e){
     let index=e.currentTarget.dataset.index;
     let buynum=this.data.goodsList[index].buynum;
     let f = 'goodsList[' + index + '].buynum'
     if(buynum>1){
         this.setData({
              [f]:buynum-1
        })
     }
     
},
addBookNum:function(e){
   let index=e.currentTarget.dataset.index;
   let buynum=this.data.goodsList[index].buynum;
   let f = 'goodsList[' + index + '].buynum'
   this.setData({
      [f]:buynum+1
  })
},

希望对你有所帮助

一、条件渲染

（一）wx:if

在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块。

<view wx:if="{{condition}}">True</view>

也可以用wx:elif 和 wx:else来添加else判断：

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

演示：
如果type的初始值为1，则页面渲染为“男”


如果type初始值为2，页面渲染为2

其他值，页面渲染为保密

（二）结合使用wx:if

可以通过一次性控制多个组件的显示与隐藏，并不是一个组件，只是一个包裹性质的容器，不会在页面做任何渲染。

<block wx:if="{{true}}">
    <view>view1</view>
    <view>view2</view>
</block>

true为显示，false为隐藏。

（三）hidden

直接使用hidden="{{condition}}"也能控制元素的显示与隐藏，条件为true为隐藏，条件为false为显示。

注：wx:if 和hidden的区别
1、wx:if以动态创建和移除的方式，控制元素的显示与隐藏；hidden用切换样式的方法（display：none/block;）控制元素的显示与隐藏。
需要频繁切换时，建议使用hidden
控制条件复杂时，建议使用wx:if，搭配wx:if/wx:else进行展示与隐藏的切换。

<view hidden="{{flag}}">条件为true的时候隐藏元素，否则显示</view>
<view wx:if="{{flag}}">这是使用wx:if控制的元素</view>

显示：

二、列表渲染

（一）wx:for

通过wx:for可以根据指定的数组，循环渲染重复的结构组件。
wxml:

<view wx:for="{{arr1}}">
    索引是：{{index}}, 当前项是：{{item}}
</view>

js:

data: {
        type:2,
        flag:true,
        arr1:['苹果','香蕉','梨']
    },

（二）wx:key

建议为渲染出来的列表项指定唯一的Key值，从而提高代码效率。

wxml:

<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

js:

data: {
        type:2,
        flag:true,
        arr1:['苹果','香蕉','梨'],
        userList:[
            {id:1,name:'张三'},
            {id:2,name:'李四'},
            {id:3,name:'王五'}
        ]
    },

🍒🍒 观众老爷们好啊，牛牛又更新了，上文我们详细了解了微信小程序中的事件绑定，那么今天我们就来讲讲WXML语法中的列表渲染和条件渲染，它俩也是非常重要的知识点，赶紧学起来吧。
🍒🍒 不过首先，我们想来补充一下数据传参的知识点以及常用的input事件用法。

一，事件传参

首先我们需要知道，微信小程序中事件处理函数的传参，并不能直接在绑定时间的同时做，也就是说以下这样操作。

<view bindtap="tapName(2)">错误</view>

是不行的，如此编译器只会将整个tapName(2)识别成事件处理函数的名字。

如果想要传参，需要为组件提供自定义属性，格式如此——data-*，*代表该自定义属性的名字。

具体实现如下：

<view bindtap="tapName" data-info="{{2}}"></view>

然后我们在事件处理函数中，只需要通过event.target.dataset.info即可获取该传入的参数。

还记得之前说过事件对象event中的target属性吗，里面就是记录触发事件组件的一些属性值，上面用到的原理就是这里。

小tip：
需要注意的是，对于已经确认为数值的参数，我们采用Mustache语法，也就双括号括住参数，而如果我们只是用双引号包围，如下：

<view bindtap="tapName" data-info="2"></view>

解析到的data-info的值将会是一个字符串，"2"。

二，input事件使用

input事件在小程序开发中是比较常用的，具体表述就是为文本框绑定事件，当内容发生变化触发。

如下设置：

<input type="text" bidninput="changetext"></input>

一般我们使用该事件时，需要在对应的事件处理函数获取到input文本框的输入值，可以如下进行操作：

changetext(e){
	console.log(e.detail.value)
}

e.detail.value就是对应着变化后的最新值。

三，条件渲染

条件渲染其实就相当于在WXML中的if语句，利用条件判断是否渲染某一个或一部分的组件。

语法为wx:if="{{condition}}"，通过判断里面的condition增加来渲染，如果为true，则渲染组件。

除了if，还有与之配套的elif和else。

<view wx:if="{{type==1}}">男</view>
<view wx:if="{{type==2}}">女</view>
<view>不详</view>

当type为1，只有第一个view组件被渲染，当type为2，只有第二个组件被渲染，如果均不满足，则只渲染第三个组件。

其实条件渲染除了if还有hidden可以做到。

语法为hidden= "{{condition}}"，hidden为组件属性，当里面condition条件值为false，组件不隐藏，为true，组件隐藏。

说到这里大家可能发觉，我们还不知道如何一次性控制多组件展示隐藏。

微信小程序中有一个<block>，它并不是组件，只是有包裹性质的容器，即使写进wxml，也不会被渲染（调试器也不会看到它的存在），我们可以利用它来实现。

<block wx:if="{{info==1}}">
<view>a</view>
<view>b</view>
<view>c</view>
</block>

if和hidden对比：

从本质上，

• if是动态创建和移除组件
• 而hidden是通过改变样式，设置display为none或block实现的

从使用上，当我们需要频繁的切换时，建议使用hidden，而当控制条件复杂时，特别需要用到elseif效果的时候，建议使用if。

四，列表渲染

列表渲染其实从理解上，就是在wxml语法中的for语句，实现循环。

语法为wx:for="{{array}}"，根据指定数组，循环渲染复杂的组件，注意，双括号中的是数组哦。使用中，我们一般同时还有给其设定唯一key值，语法为wx:key。

比如我们的数组如下：

user:[
	{id:1, name:"apple"},
	{id:2, name:"add"},
	{id:3, name:"abandon"}
]

这样我们可以设置wx:key="id"，当我们调用里面的name，循环会根据key遍历，调用时key为何值，调用就是哪一个name值。

<view wx:for="{{user}}" wx:key="id">{{name}}<view>

需要注意的是，设置key不需要使用{{}}

如果数组没有这种id属性，我们可以直接设定key为index，如wx:key="index"，也是可以循环遍历数组。

好啦，本次小程序的文章到这里就结束啦，如果对您有帮助的话，可以继续关注牛牛后续的文章呀，您的支持是我们创作的最大动力！

🍒牛牛最近发现一款刷题神器，各大互联网大厂的面试真题，还有超大面试题库。
🍒里面还有很多大佬的面经，赶紧卷起来！！
点击直接访问

债见~~