微信小程序js文件改變參數(shù)并在視圖上及時更新【推薦】
更新時間：2018年06月11日 16:47:46 作者：雅玲啞鈴
這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時更新的實現(xiàn)代碼，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
用過VUE的童鞋都知道，vue在改變data里面參數(shù)可以以直接用this.XXX=XXX，并且視圖層也會立即更新呈現(xiàn)，但是這里我想介紹一下微信小程序是怎樣操作data里面參數(shù)并在視圖層及時更新的
一、簡單參數(shù)
XX.wxml
<view>
<text>{{str}}</text>
</view>
<button bindtap="change">改變</button>
XX.js
Page({
data: {
str:'早上好'
},
change: function() {
this.setData({
str:"晚上好"
})
}
})
二、已知下標的數(shù)組
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':'晚上好'
})
}
})
三、動態(tài)下標的數(shù)組
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);
}
})
總結(jié)
以上所述是小編給大家介紹的微信小程序js文件改變參數(shù)并在視圖上及時更新，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
之前提到了JS中比較簡單的設(shè)計模式，在各種設(shè)計模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談?wù)凧S中比較簡單的繼承方法2016-01-01
這篇文章主要介紹了JS修改iframe頁面背景顏色的方法,涉及javascript操作iframe頁面樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
用最通俗易懂的代碼幫助新手理解javascript閉包 推薦
我同樣也是個javascript新手，怎么說呢，先學的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過頭來學javascript面向?qū)ο缶幊?/div> 2012-03-03
將時間轉(zhuǎn)換成時間搓的方法有很多，在本文為大家介紹下使用js將當前時間轉(zhuǎn)換成時間搓 例如2013-09-11 12:12:12，感興趣的朋友可以參考下2013-09-09
本文主要分享了jQuery實現(xiàn)頁面頂部下拉廣告的具體代碼。具有一定的參考價值，下面跟著小編一起來看下吧2016-12-12
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下2013-10-10
下面小編就為大家?guī)硪黄狫S刷新父窗口的幾種方式小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
GUID（全局統(tǒng)一標識符）是指在一臺機器上生成的數(shù)字，下面為大家介紹下原生JavaScript生成GUID的實現(xiàn)，需要的朋友不要錯過2014-09-09
這篇文章主要介紹了JavaScript AOP編程,實例分析了javascript實現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下2015-06-06最新評論