小程序的数据或者事件绑定

小程序的数据绑定,数据写在js文件的data里,类似c的变量设置,在wxml文件中进行调用
例如
{{info}}
这个info就是一个变量名,设置在js文件里的data中

  data: {
    info:'hello'
  },

此时,页面显示hello,当然图片的路径以及一些基本运算都可以按照此方式进行显示,请自行练习。
注意:数据存储在js文件里的data的大括号里,跟c一样,变量名可以赋值。下面讲如何在页面将我们的数据读取出来,或者如果进行调用更改

事件绑定:
tap bindtap 触摸后松开进行触发
input bindinput 文本输入
change bindchange 状态改变
事件对象的属性列表
当事件回调触发的时候会收到一个事件对象event,它的详细属性:
type string 事件类型
timeStamp Integer 页面打开到触发事件所经过的毫秒数
target Object 触发事件的组件的一些属性值集合
currentTarget Object 当前组件的一些属性值集合
detail Object 额外信息
touches Array 当前停留在屏幕中的触摸点信息数组
changedTouches Array 当前变化的触摸点信息数组

读取数据,显示文本

 <view>{{info}}</view>
 <view>{{count}}</view>

只要在wxml文件上写上变量名,那么在js里设置好的数据内容就会显示。如果需要改变其变量,我们可以通过按钮尝试
首先wxml文件中设置按钮

<button type="primary" bindtap="btntap"  data-info="{{'123'}}">按钮</button>

我们在按钮上绑定了一个叫做btntap的函数,可以在这里用data-info直接传导123过去给data中的info这个变量赋值(一按按钮info就变成123)也可以在函数里用setdata的方式给变量info重新赋值,

data: {
    info:'hello',
  count:0
  },
btntap(e){
  console.log(e)
  this.setData({
    count:this.data.count+1,
    info:e.target.dataset.info
  })
},

这样刷新页面,页面会出现hello和0,按按钮后,hello变成123,count变成1
总结:我们将数据变量存储在js文件的data中,这些数据可以通过wxml文件进行显示或者更改,也可以在js内的函数里通过setdata语句进行修改
文本框输入,先在wxml文件中设置文本框

<input value="{{info}}" bindinput="input"></input>

js文件中创建函数
input(e){
console.log(e.detail.value)
this.setData({ info:e.detail.value})
},
此时输入的值会直接替换info的值

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值