微信小程序js文件改变参数并在视图上及时更新【推荐】
更新时间：2018年06月11日 16:47:46 作者：雅玲哑铃
这篇文章主要介绍了微信小程序js文件改变参数并在视图上及时更新的实现代码，本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
用过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文件改变参数并在视图上及时更新，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
uniapp微信小程序底部动态tabBar的解决方案(自定义tabBar导航)
tabBar如果应用是一个多tab应用,可以通过tabBar配置项指定tab栏的表现,以及tab切换时显示的对应页,下面这篇文章主要给大家介绍了关于uniapp微信小程序底部动态tabBar的解决方案,需要的朋友可以参考下2022-04-04
可能有些同学看到这个标题就会产生疑惑，为什么我们要判断JavaScript中的两个变量是否相等，JavaScript不是已经提供了双等号“==”以及三等号“===”给我们使用了吗2019-12-12
这篇文章主要介绍了微信小程序事件绑定基本语法示例详解,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2025-04-04
下面小编就为大家带来一篇window.open打开窗口被拦截的快速解决方法。觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家详细介绍了小程序自定义日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
布尔运算符 && 和 || 的时候，我说过它们的结果是布尔值，它们也能用于计算其他的类型的数据，这种时候，返回的就将是其中的一个参数了2013-11-11
这篇文章主要为大家详细介绍了微信小程序实现文字无限轮播效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-12-12
这篇文章主要介绍了JavaScript框架特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
这篇文章主要介绍了微信小程序点击顶部导航栏切换样式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
javascript是基于原型(Prototype based)的面向对象的语言，这点不同于我们熟悉的.NET，Java语言，是基于类模式(Class based)。2010-03-03
最新评论