用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

小程序js文件改变参数并在视图上及时更新

Rolan 2018-6-12 00:28

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

一、简单参数

XX.wxml

  1. <view>
  2. <text>{{str}}</text>
  3. </view>
  4. <button bindtap="change">改变</button>
  5. XX.js
  6. Page({
  7. data: {
  8. str:'早上好'
  9. },
  10. change: function() {
  11. this.setData({
  12. str:"晚上好"
  13. })
  14. }
  15. })

二、已知下标的数组

XX.wxml

  1. <view>
  2. <text>{{array[0].text}}</text>
  3. </view>
  4. <button bindtap="change">改变</button>
  5. XX.js
  6. Page({
  7. data: {
  8. array: [{text: '早上好'}],
  9. },
  10. change: function() {
  11. this.setData({
  12. 'array[0].text':'晚上好'
  13. })
  14. }
  15. })

三、动态下标的数组

XX.wxml

  1. <view>
  2. <block wx:for="array" wx:key="index">
  3. <text>{{item.text}}</text>
  4. <button bindtap="change" data-index="index">改变</button>
  5. </block>
  6. </view>
  7. <button bindtap="change">改变</button>

XX.js

  1. Page({
  2. data:{
  3. array:[
  4. {text:'1111'},
  5. {text:'2222'},
  6. {text:'3333'}
  7. ]
  8. },
  9. change:function(e){
  10. let param = {};
  11. let string = "array["+e.target.dataset.index+"].text;
  12. param[string] = '0000';
  13. this.setData(param);
  14. }
  15. })

希望对大家有所帮助哦

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 雅玲哑铃 来自: 简书

相关阅读