微信小程序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 相关文章推荐
破除一些网站复制、右键限制
Nov 04 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
Mar 04 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
Feb 27 Javascript
简单谈谈javascript中的变量、作用域和内存问题
Aug 30 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
浅析BootStrap中Modal(模态框)使用心得
Dec 24 Javascript
bootstrap中selectpicker下拉框使用方法实例
Mar 22 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
JavaScript Window浏览器对象模型原理解析
May 30 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue脚手架项目创建步骤详解
Mar 02 Vue.js
用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 无线电
php操作mysql数据库的基本类代码
2014/02/25 PHP
php PDO异常处理详解
2016/11/20 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
jQuery的初始化与对象构建之浅析
2011/04/12 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
js渐变显示渐变消失示例代码
2013/08/01 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
2013/12/02 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
2016/05/04 Javascript
canvas实现手机端用来上传用户头像的代码
2016/10/20 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
jQuery实现开关灯效果
2020/08/02 jQuery
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python魔术方法详解
2015/02/14 Python
解读Python中degrees()方法的使用
2015/05/18 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Django框架使用内置方法实现登录功能详解
2019/06/12 Python
python如何制作英文字典
2019/06/25 Python
详解python中自定义超时异常的几种方法
2019/07/29 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
用python实现名片管理系统
2020/06/18 Python
交通安全教育制度
2014/02/02 职场文书
乡镇干部先进事迹材料
2014/02/03 职场文书
运动会稿件300字
2014/02/14 职场文书
网络技术专业求职信
2014/05/02 职场文书
文明礼仪伴我行演讲稿
2014/05/12 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
支行行长岗位职责
2015/02/15 职场文书
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
为Centos安装指定版本的Docker
2022/04/01 Servers
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python