微信小程序 setData
先来说一下常用的东西一些api吧，做一个记录顺便加强记忆了。
这里的源码操作data确实奇怪，和vue还是有这不少的差距我贴一下代码吧
<template>
<div class="login">
vue中改data的例子：
<button @click="tianjia()">改data</button>
</div>
</template>
<script>
export default {
data() {
return {
a:123,
b:{a:123},
c:[{a:123},{b:123}]
}
},
methods:{
//点击事件触发
tianjia(){
// 直接修改
this.a=666
// 修改json
this.b.a=666
// arr修改
this.a[0].a=666
}
}
}
现在来同样的方法来试试小程序：
//wxml文件
<button bindtap="tianjia">按钮</button>
//js文件
Page({
/**
* 页面的初始数据
*/
data: {
a:123,
b:{a:123},
c:[{a:123},{b:123}]
},
methods:{
//点击事件触发
tianjia(){
ler arr = "c["+0+"].a"
this.setData({
// 直接修改
a:33
// 修改json
['b.a']:666
// 修改数组的
[arr]:222
})
}
}
})
像是vue中修改数据中的data直接所以this.xxx就可以但是换到小程序就不可以，在微信小程序中修改data和查看data都和vue的不同相同。
· 小程序改data数据方法：this.setData（{}）
· 小程序改data数据方法：this.data.xx
之所没有写修改数组的和json的数据是因为这里的写法比较特殊单独拉出来鞭一下先定义一个数组吧：
我们先在data中定义一个数组 arr=[0,0,0,0]，如果我们想修改arr数组的第2个值
的话，我们可以按上面的写法直接根据数组的键值修改，如下：
this.setData({
arr[1]:1//修改后的 arr=[0,1,0,0]，这里我们知道了具体的键值
});
这样写没有问题的，可是如果是动态的呢？
this.setData({
arr[index]:1//修改后的会直接报错的，但是要怎么改呢？
});
动态修改小程序数组数据的方法
Page({
data: {
arr:[0,0,0,0]
},
//事件处理函数
changeMenus: function(e){
let index = e.currentTarget.index;//这里取得的index=1，那么此函数运行后arr=[0,1,0,0]
let _arr= "arr["+index+"]";
this.setData({
[_arr]:1
});
}
})
