微信小程序事件和语法-Toy模板网

这篇具有很好参考价值的文章主要介绍了微信小程序事件和语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

属性列表

target：触发事件的对象

currentTarget：绑定事件的对象，可能不是由此对象触发而是触发对象冒泡导致触发此事件

微信小程序事件绑定

微信小程序事件和语法,微信小程序,微信小程序

<button type="primary" bindtap="btnTapHandler">按钮</button>

在函数中调用data的值

微信小程序事件和语法,微信小程序,微信小程序

  // 按钮点击事件
  btnTapHandler(e){
      this.setData({
          number:this.data.number+1
      })
  }

传递参数

<button type="primary" bindtap="btnTapHandler2" data-info="{{2}}">按钮+2</button>

接收参数

  // 按钮点击事件 + 2
  btnTapHandler2(e){
      console.log(e);
      console.log(e.target.dataset.info);
      this.setData({
        number: this.data.number + e.target.dataset.info
      })
  }

input

<input bindinput="inputHandler" value="{{msg}}"></input>



  inputHandler(e){
    console.log(e.detail.value)
    this.setData({
        msg: e.detail.value
    })
  }

控制是否显示隐藏 wx:if 通过创建和溢出元素实现控制条件复制时推荐

<view wx:if="{{flag}}">是否显示</view>

使用block标签不会渲染给浏览器源文件标

控制是否显示隐藏 wx:hidden 通过切换样式方式实现频繁切换使用这个

<view hidden="{{flag}}">条件为true</view>

循环字符

<view wx:for="{{arr1}}">
  索引:{{index}}，内容:{{item}}
</view>


arr1:['标签一','标签二','标签三']


// 指定索引名称
<view wx:for="{{arr1}}" wx:for-index="idx" wx:for-item="itemName">
  索引:{{idx}}，内容:{{itemName}}
</view>

循环数组对象指定key提高渲染速度文章来源地址https://www.toymoban.com/news/detail-608938.html

<view wx:for="{{userList}}" wx:key="id">
  索引:{{item.id}}，内容:{{item.name}}
</view>


    userList:[
      {id:1,name:'小红'},
      {id:2,name:'小兰'}
    ]

到了这里，关于微信小程序事件和语法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！