快捷導(dǎo)航

微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新【推薦】

更新時(shí)間：2018年06月11日 16:47:46 作者：雅玲啞鈴

這篇文章主要介紹了微信小程序js文件改變參數(shù)并在視圖上及時(shí)更新的實(shí)現(xiàn)代碼，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧

用過VUE的童鞋都知道，vue在改變data里面參數(shù)可以以直接用this.XXX=XXX，并且視圖層也會(huì)立即更新呈現(xiàn)，但是這里我想介紹一下微信小程序是怎樣操作data里面參數(shù)并在視圖層及時(shí)更新的

一、簡(jiǎn)單參數(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':'晚上好'
  })
 }
})

三、動(dòng)態(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ù)并在視圖上及時(shí)更新，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

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