蝙蝠岛资源网 Design By www.hbtsch.com
在我们项目开发过程中,实例中的数据类型可以是对象、数组等。在对象中,某个属性值发生更改时,我们可以通过对象的深度监听,以达到重新渲染页面的需求。或者查阅这篇文章
例如:
<script> export default { data(){ return { objVal: { name: 'obj', type: 'obj' } } }, watch:{ objVal:{ handler(val,oldval){ }, deep: true, } }, methods:{ changeObj(){ this.objVal.name = 'newobj'; } } } </script>
但是,在使用同一种方式进行数组值更改监听时,这种做法是无效的。
<script> export default { data() { return { arrList: [1,2,3,4,5] }; }, watch: { arrList: { handler(val, oldval) { }, deep: true } }, methods: { changeArr() { // 无效 this.arrList[0] = 10; } } }; </script>
上述用以监听数组值变化的方法是无效的,vue是不会响应数据变化而重新去渲染页面。在vue中仅需要通过修改赋值语句的方式,即可让vue响应数组数据的变化。具体操作如下:
使用方法:
// Vue.set Vue.set(vm.items, indexOfItem, newValue) // Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
具体使用案例:
<script> export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改为: this.arrList.splice(0, 1, 10); } } }; </script>
或:
<script> export default { data() { return { arrList: [1,2,3,4,5] }; }, methods: { changeArr() { // this.arrList[0] = 10; // 修改为: this.$set(this.arrList, 0, 10); } } }; </script>
以上两种方式,均可达到监听数组值变化的效果。
补充知识:vue数组操作不触发前端重新渲染
暂时使用给数组先赋值 [ ] ,然后重新赋值的方式解决。
此外,能够监听的数组变异方法
https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95
还有就是set
标签:
vue,数组值监听,重新渲染
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无在vue中对数组值变化的监听与重新响应渲染操作的评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]