首页 > 编程 > JavaScript > 正文

微信小程序js文件改变参数并在视图上及时更新【推荐】

2019-11-19 13:39:50
字体:
来源:转载
供稿:网友

用过VUE的童鞋都知道,vue在改变data里面参数可以以直接用this.XXX=XXX,并且视图层也会立即更新呈现,但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的

一、简单参数

XX.wxml

<view>  <text>{{str}}</text></view><button bindtap="change">改变</button>

XX.js

Page({ data: {  str:'早上好' }, change: function() {  this.setData({   str:"晚上好"  }) }})

二、已知下标的数组

XX.wxml

<view>  <text>{{array[0].text}}</text></view><button bindtap="change">改变</button>

XX.js

Page({ data: {  array: [{text: '早上好'}], }, change: function() {  this.setData({   'array[0].text':'晚上好'  }) }})

三、动态下标的数组

XX.wxml

<view>  <block wx:for="array" wx:key="index">    <text>{{item.text}}</text>    <button bindtap="change" data-index="index">改变</button>  </block></view><button bindtap="change">改变</button>

XX.js

Page({  data:{    array:[      {text:'1111'},      {text:'2222'},      {text:'3333'}    ]  },  change:function(e){    let param = {};    let string = "array["+e.target.dataset.index+"].text;    param[string] = '0000';    this.setData(param);  }})

总结

以上所述是小编给大家介绍的微信小程序js文件改变参数并在视图上及时更新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持!

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表