美文网首页让前端飞程序员我爱编程
小程序js文件改变参数并在视图上及时更新

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

作者: 雅玲哑铃 | 来源:发表于2018-06-07 12:44 被阅读18次

    用过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文件改变参数并在视图上及时更新

        本文链接:https://www.haomeiwen.com/subject/ejqgsftx.html