微信小程序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 相关文章推荐
Javascript 面向对象 继承
May 13 Javascript
jquery中.add()的使用分析
Apr 26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
Feb 03 Javascript
浅谈js构造函数的方法与原型prototype
Jul 04 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
jQuery数组处理函数整理
Aug 03 Javascript
关于javascript作用域的常见面试题分享
Jun 18 Javascript
jQuery实现可兼容IE6的遮罩功能详解
Sep 19 jQuery
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
用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
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
使用PHP实现蜘蛛访问日志统计
2013/07/05 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
2010/04/15 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
angular2使用简单介绍
2016/03/01 Javascript
jQuery UI Bootstrap是什么?
2016/06/17 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
JS身份证信息验证正则表达式
2017/06/12 Javascript
vue绑定的点击事件阻止冒泡的实例
2018/02/08 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
[01:03:31]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第二局
2016/02/26 DOTA
python虚拟环境virualenv的安装与使用
2016/12/18 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
基于Python_脚本CGI、特点、应用、开发环境(详解)
2017/05/23 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
python使用Qt界面以及逻辑实现方法
2019/07/10 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
中学运动会广播稿
2014/01/19 职场文书
公司司机岗位职责
2014/02/07 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis