微信小程序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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
js手动播放图片实现图片轮播效果
Sep 17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
js前端导出Excel的方法
Nov 01 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
Sep 04 Javascript
jQuery实现移动端扭蛋机抽奖
Nov 08 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/01 无线电
自动跳转中英文页面
2006/10/09 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
php插入排序法实现数组排序实例
2015/02/16 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
js 判断checkbox是否选中的实现代码
2010/11/23 Javascript
JS保留两位小数,多位小数的示例代码
2014/01/07 Javascript
JS Ajax请求如何防止重复提交
2016/06/13 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
JS实现禁止鼠标右键的功能
2016/10/15 Javascript
react-native android状态栏的实现
2018/06/15 Javascript
js实现按钮开关单机下拉菜单效果
2018/11/22 Javascript
JS获取动态添加元素的方法详解
2019/07/31 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
JS性能优化实现方法及优点进行
2020/08/30 Javascript
Python3.2中的字符串函数学习总结
2015/04/23 Python
解决Python中list里的中文输出到html模板里的问题
2018/12/17 Python
详解Python给照片换底色(蓝底换红底)
2019/03/22 Python
Python3网络爬虫开发实战之极验滑动验证码的识别
2019/08/02 Python
python数据持久存储 pickle模块的基本使用方法解析
2019/08/30 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
Python 实现一个计时器
2020/07/28 Python
Spanx塑身衣官网:美国知名内衣品牌
2017/01/11 全球购物
Cotton On南非:澳洲时尚平价品牌
2018/06/28 全球购物
高中生毕业自我鉴定范文
2013/12/22 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
幼儿园毕业园长感言
2014/02/24 职场文书
党的群众路线教育实践活动总结报告
2014/04/28 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年留守儿童工作总结
2014/12/10 职场文书
七年级上册生物的课件
2019/08/07 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
详解OpenCV获取高动态范围(HDR)成像
2022/04/29 Python