vue打卡-数组的数据响应变化

  • 更改原数组的值
    push(),pop(),shift(),unshift(),splice(),sort(),reverse(),会改变数组并更新视图
<div id="app">
    <p>{{list}}</p>
</div>
 let vm = new Vue({
        el:"#app",
        data:{
            list:[1,2,3]
        }
    });
vm.list.push(6);
新增数据.png
  • 不更改原数组的数值
    slice
    concat
    filter
    map
    可以使用新数组替换原来的数组,以使视图发生变化
 let vm = new Vue({
        el:"#app",
        data:{
            list:[1,2,3]
        }
    });
vm.list = vm.list.map((item) => item*2);
map.png
  • 注意以下两点
    (1)通过索引直接设置项。
    (2)修改数组长度,vm.list.length=1
    不会触发视图的更新。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容