微信小程序js文件改变参数并在视图上及时更新【推荐】


Posted in Javascript onJune 11, 2018

用过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文件改变参数并在视图上及时更新,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
关于javascript中的typeof和instanceof介绍
Dec 04 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
js中opener与parent的区别详细解析
Jan 14 Javascript
jquery增加和删除元素的方法
Jan 14 Javascript
JavaScript File分段上传
Mar 10 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
DropDownList实现可输入可选择(两种版本可选)
Dec 07 Javascript
Bootstrap面板使用方法
Jan 16 Javascript
js学习心得_一个简单的动画库封装tween.js
Jul 14 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
用vue快速开发app的脚手架工具
Jun 11 #Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 #Javascript
vue非父子组件通信问题及解决方法
Jun 11 #Javascript
Angular如何在应用初始化时运行代码详解
Jun 11 #Javascript
详解.vue文件解析的实现
Jun 11 #Javascript
vue filters的使用详解
Jun 11 #Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 #Javascript
You might like
法国:浪漫之都的咖啡文化
2021/03/03 咖啡文化
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP遍历XML文档所有节点的方法
2015/03/12 PHP
关于Yii2框架跑脚本时内存泄漏问题的分析与解决
2019/12/01 PHP
JS实现悬浮移动窗口(悬浮广告)的特效
2013/03/12 Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
2013/08/14 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
JavaScript弹出窗口方法汇总
2014/08/12 Javascript
javascript制作的滑动图片菜单
2015/05/15 Javascript
简介JavaScript中的push()方法的使用
2015/06/09 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
2017/12/25 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
小程序的上传文件接口的注意要点解析
2019/09/17 Javascript
微信小程序缓存支持二次开发封装实现解析
2019/12/16 Javascript
Python实现冒泡,插入,选择排序简单实例
2014/08/18 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
python打包压缩、读取指定目录下的指定类型文件
2018/04/12 Python
python字符串,元组,列表,字典互转代码实例详解
2020/02/14 Python
Python逐行读取文件内容的方法总结
2020/02/14 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python远程方法调用实现过程解析
2020/07/28 Python
房地产出纳岗位职责
2013/12/01 职场文书
英文请假条
2014/04/11 职场文书
消防安全责任书范本
2014/04/15 职场文书
小学社会实践活动总结
2014/07/03 职场文书
2014年班干部工作总结
2014/11/25 职场文书
党员个人承诺书
2015/04/27 职场文书
大学生军训感言
2015/08/01 职场文书
2016年“抗战胜利纪念日”71周年校园广播稿
2015/12/18 职场文书
python b站视频下载的五种版本
2021/05/27 Python