微信小程序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 相关文章推荐
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
微信小程序  audio音频播放详解及实例
Nov 02 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
详细分析JS函数去抖和节流
Dec 05 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 29 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
PHP与javascript对多项选择的处理
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
php实现加减法验证码代码
2014/02/14 PHP
php自定文件保存session的方法
2014/12/10 PHP
javascript常用的正则表达式实例
2014/05/15 Javascript
Vue.js组件tabs实现选项卡切换效果
2016/12/01 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
jquery easyui如何实现格式化列
2017/07/30 jQuery
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
用Fundebug插件记录网络请求异常的方法
2019/02/21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python中getattr函数使用方法 getattr实现工厂模式
2014/01/20 Python
Python错误: SyntaxError: Non-ASCII character解决办法
2017/06/08 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
基于Django集成CAS实现流程详解
2020/11/28 Python
CSS3 实现侧边栏展开收起动画
2014/12/22 HTML / CSS
一道写SQL的面试题和答案
2013/11/19 面试题
材料成型专业个人求职信范文
2013/09/25 职场文书
写给女生的道歉信
2014/01/08 职场文书
大学新生欢迎词
2014/01/10 职场文书
护理专业求职信
2014/06/15 职场文书
百日安全生产活动总结
2014/07/05 职场文书
公司合作意向书范文
2014/07/30 职场文书
婚礼庆典答谢词
2015/01/20 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
合同补充协议书
2016/03/24 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
2020年元旦晚会策划书模板
2019/12/30 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫