欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

微信小程序开发第三篇 数据绑定,点击事件,数组循环

程序员文章站 2022-07-12 08:13:23
...

前面介绍了注册以及项目结构,现在开始开发吧。

1。数据绑定,如果学过vue.js的小伙伴应该很快会上手。小程序的数据绑定也是{{}},下面看例子吧

首先清空index.wxml的代码


<view>
<text>{{name}}</text>
</view>

其中view相当于html的div.  接下来在index.js中data(和vue一样)定义变量

微信小程序开发第三篇 数据绑定,点击事件,数组循环

然后保存,就可以看见,数据绑定成功了,

微信小程序开发第三篇 数据绑定,点击事件,数组循环

2.点击事件(bindtap)

在这里我们使用bindtap点击事件,改变name的名字代码如下

<view>
<text>{{name}}</text>
<button type='success' bindtap='clickName'>点击</button>
</view>

然后在index.js中 写JS

微信小程序开发第三篇 数据绑定,点击事件,数组循环

这里就和vue不一样了,需要使用this.setData来改变变量的值,这样就好了。

3.数组循环 wx:for

 


<view  wx:for='{{arrList}}' wx:key='item'>

{{index}}-{{item}}
</view>

 

其中{{index}}代表的就是默认下标,{{item}}代码每一列展示的数据。在data中arrList如下

微信小程序开发第三篇 数据绑定,点击事件,数组循环

 

如果我们要循环这样的数组

微信小程序开发第三篇 数据绑定,点击事件,数组循环


<view  wx:for='{{arrList}}' wx:key='item.name'>

{{index}}-{{item.name}}--{{item.sex}}
</view>

这样就可以了

微信小程序开发第三篇 数据绑定,点击事件,数组循环