uniapp怎么在方法中改变data里的值
在开发uniapp过程中，我们经常需要在页面中改变data的值。可以直接在wxml模板中通过事件绑定调用methods中的方法，在方法中修改data中的值，更新视图。
1. 在methods中修改data的值
在Vue中，data是一个普通的JavaScript对象，我们可以通过方法改变它的值。在uniapp中也是同样的做法。
如下是一个简单的例子，通过点击按钮调用methods中的方法，修改data中的msg的值：
<template>
<div>
<p>{{msg}}</p>
<button @click="changeMsg">点击修改msg</button>
</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello World!',
};
},
methods: {
changeMsg() {
this.msg = 'Welcome to uniapp!';
},
},
};
</script>
代码中，由于msg是定义在data中的，我们在methods函数中通过this访问它，修改msg的值后，uniapp会自动将页面中使用msg的部分全部更新。
2. 通过computed计算属性修改data的值
在uniapp中也支持在computed计算属性中修改data的值。
如下是一个简单的例子，在computed中定义一个fullName计算属性，实现firstName和lastName的拼接：
<template>
<div>
<input v-model="firstName" />
<input v-model="lastName" />
<p>Hello, {{fullName}}</p>
</div>
</template>
<script>
export default {
data() {
return {
firstName: '',
lastName: '',
};
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`;
},
set(value) {
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
},
},
},
};
</script>
代码中，我们定义了一组firstName和lastName的输入框，然后在computed中定义fullName计算属性实现对它们的拼接。当我们修改其中一个输入框中的值时，uniapp会自动调用computed中的get方法获得拼接后的fullName，并显示在视图中；当我们修改fullName的值时，uniapp会调用computed中的set方法解析fullName，将其拆分为firstName和lastName，并更新视图。
3. 使用$set方法修改data的值
当我们需要改变data中某个嵌套对象的值时，直接修改对应的属性可能无法通知uniapp进行更新。这是因为调用Vue.set(obj, key, value)、vm.$set(obj, key, value) 或者直接将数据替换成一个新对象或数组即可。
如下是一个简单的例子，在数组中添加一个元素：
<template>
<div>
<p v-for="(item, index) in list" :key="index">{{item}}
<button @click="addItem">添加新项</button>
</div>
</template>
<script>
export default {
data() {
return {
list: ['item1', 'item2', 'item3'],
};
},
methods: {
addItem() {
this.$set(this.list, this.list.length, 'new item');
},
},
};
</script>
代码中，我们定义了一个list数组，然后通过$set方法添加新的项，即可让uniapp更新视图。
4. 总结
在uniapp中，我们可以直接在methods中修改data的值，使用computed计算属性修改data的值，或者通过$set方法修改嵌套对象的值。不同的场合下，选择不同的方式来操作data的值。
参考文献：