微信小程序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 相关文章推荐
什么是json和jsonp,jQuery json实例详详细说明
Dec 11 Javascript
javascript中this做事件参数相关问题解答
Mar 17 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
基于jQuery实现搜索关键字自动匹配功能
Mar 26 Javascript
JavaScript设计模式经典之命令模式
Feb 24 Javascript
利用npm 安装删除模块的方法
May 15 Javascript
小程序ios音频播放没声音问题的解决
Jul 11 Javascript
当vue路由变化时,改变导航栏的样式方法
Aug 22 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
详解vue页面首次加载缓慢原因及解决方案
Nov 06 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 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概述.
2006/10/09 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
JQUERY THICKBOX弹出层插件
2008/08/30 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
2013/12/29 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
js判断当前浏览器类型,判断IE浏览器方法
2014/06/02 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
ECMAScript6中Set/WeakSet详解
2015/06/12 Javascript
获取input标签的所有属性的方法
2016/06/28 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
基于VUE实现判断设备是PC还是移动端
2020/07/03 Javascript
django接入新浪微博OAuth的方法
2015/06/29 Python
Python 模板引擎的注入问题分析
2017/01/01 Python
tensorflow获取变量维度信息
2018/03/10 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
通用的Django注册功能模块实现方法
2021/02/05 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
教育局长自荐信范文
2013/12/22 职场文书
小学生暑假感言
2014/02/06 职场文书
党的群众路线教育实践活动批评与自我批评
2014/02/16 职场文书
央视元宵晚会主持串词
2014/03/25 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
大学毕业生管理学求职信
2014/09/01 职场文书
王金山在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
关于运动会的宣传稿
2015/07/23 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js