微信小程序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:"晚上好"
})
}
})
二、已知下標(biāo)的數(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)下標(biāo)的數(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ù)并在視圖上及時更新，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
tabBar如果應(yīng)用是一個多tab應(yīng)用,可以通過tabBar配置項指定tab欄的表現(xiàn),以及tab切換時顯示的對應(yīng)頁,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序底部動態(tài)tabBar的解決方案,需要的朋友可以參考下2022-04-04
可能有些同學(xué)看到這個標(biāo)題就會產(chǎn)生疑惑，為什么我們要判斷JavaScript中的兩個變量是否相等，JavaScript不是已經(jīng)提供了雙等號“==”以及三等號“===”給我們使用了嗎2019-12-12
這篇文章主要介紹了微信小程序事件綁定基本語法示例詳解,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-04
下面小編就為大家?guī)硪黄獁indow.open打開窗口被攔截的快速解決方法。覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要為大家詳細介紹了小程序自定義日歷效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
布爾運算符 && 和 || 的時候，我說過它們的結(jié)果是布爾值，它們也能用于計算其他的類型的數(shù)據(jù)，這種時候，返回的就將是其中的一個參數(shù)了2013-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)文字無限輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了JavaScript框架特性，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了微信小程序點擊頂部導(dǎo)航欄切換樣式代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-11-11
javascript是基于原型(Prototype based)的面向?qū)ο蟮恼Z言，這點不同于我們熟悉的.NET，Java語言，是基于類模式(Class based)。2010-03-03