vue对数组的更新检测
最近公司项目开始用vue,在使用过程中遇到一个坑:更改data中数组中的值不能在页面响应
data() {
return {
beforeImgs: [
'url(//h0.hucdn.com/open/201830/3fbe4ce353502536_336x173.png)',
'url(//h0.hucdn.com/open/201830/4d9db33c740ca67d_333x174.png)',
'url(//h0.hucdn.com/open/201830/5412527740bbfa25_184x181.png)',
'url(//h0.hucdn.com/open/201830/4e1cd898dc7c7e10_153x183.png)',
'url(//h0.hucdn.com/open/201830/e2388362ed573c41_155x183.png)',
'url(//h0.hucdn.com/open/201830/d12e8001be6108d1_176x183.png)',
],
afterImgs: [
'url(//h0.hucdn.com/open/201830/11b0695defc0d799_336x173.png)',
'url(//h0.hucdn.com/open/201830/55d604a098bf552d_333x174.png)',
'url(//h0.hucdn.com/open/201830/c63051b6284a9ea7_184x181.png)',
'url(//h0.hucdn.com/open/201830/f3b7cf08723fa5cc_153x183.png)',
'url(//h0.hucdn.com/open/201830/a5607cc96af0c0e0_155x183.png)',
'url(//h0.hucdn.com/open/201830/bc10d54f490b6dfd_176x183.png)',
],
}
},
mounted() {
this.init();
},
methods: {
init() {
this.beforeImgs[0] = this.afterImgs[0];
},
},
后来我在官网找到这样的原因
![vue对数组的更新检测](https://img.it610.com/image/info10/4347f8a6182640d8bf6c7613f4fcf02e.jpg)
文章图片
【vue对数组的更新检测】但是可以使用splice方法改变数组
this.beforeImgs.splice(0, 1, this.afterImgs[0]);
推荐阅读
- 布丽吉特,人生绝对的赢家
- 进必趋|进必趋 退必迟,问起对 视勿移
- 对称加密和非对称加密的区别
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- 对抗抑郁最好的方法
- 装聋作哑,关系融洽
- 社保代缴公司服务费包含哪些
- 数组常用方法一
- 幸福的婚姻不争对错!读《你要的是幸福还是对错》有感。