快捷導(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)文章

詳解webpack解惑：require的五種用法
這篇文章主要介紹了詳解webpack解惑：require的五種用法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-06-06
JavaScript繼承模式粗探
之前提到了JS中比較簡(jiǎn)單的設(shè)計(jì)模式，在各種設(shè)計(jì)模式中被最常使用的工具之一就是原型鏈的繼承。作為OOP的特質(zhì)之一——繼承，今天主要談?wù)凧S中比較簡(jiǎn)單的繼承方法
2016-01-01
JS修改iframe頁(yè)面背景顏色的方法
這篇文章主要介紹了JS修改iframe頁(yè)面背景顏色的方法,涉及javascript操作iframe頁(yè)面樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-04-04
用最通俗易懂的代碼幫助新手理解javascript閉包推薦
我同樣也是個(gè)javascript新手，怎么說(shuō)呢，先學(xué)的jquery，精通之后發(fā)現(xiàn)了javascript的重要性，再回過頭來(lái)學(xué)javascript面向?qū)ο缶幊?/div> 2012-03-03
js將當(dāng)前時(shí)間格式轉(zhuǎn)換成時(shí)間搓(自寫)
將時(shí)間轉(zhuǎn)換成時(shí)間搓的方法有很多，在本文為大家介紹下使用js將當(dāng)前時(shí)間轉(zhuǎn)換成時(shí)間搓例如2013-09-11 12:12:12，感興趣的朋友可以參考下
2013-09-09
jQuery實(shí)現(xiàn)頁(yè)面頂部下拉廣告
本文主要分享了jQuery實(shí)現(xiàn)頁(yè)面頂部下拉廣告的具體代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2016-12-12
常用js字符串判斷方法整理
js常用方法及字符串的常用判斷方法都是在工作中經(jīng)常用到的，在本文整理了一些，感興趣的朋友可以參考下
2013-10-10
JS刷新父窗口的幾種方式小結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇JS刷新父窗口的幾種方式小結(jié)(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-11-11
原生JavaScript生成GUID的實(shí)現(xiàn)示例
GUID（全局統(tǒng)一標(biāo)識(shí)符）是指在一臺(tái)機(jī)器上生成的數(shù)字，下面為大家介紹下原生JavaScript生成GUID的實(shí)現(xiàn)，需要的朋友不要錯(cuò)過
2014-09-09
JavaScript AOP編程實(shí)例
這篇文章主要介紹了JavaScript AOP編程,實(shí)例分析了javascript實(shí)現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下
2015-06-06