Vue中数组的响应数据变化

6

在Vue中,访问data里面保存的数据的时候,对其进行修改是和普通数据修改不同的,修改数组长度时不能触发视图更新,接下来我们就来了解一下Vue中数组的响应数据变化吧 1234567…

在Vue中,访问data里面保存的数据的时候,对其进行修改是和普通数据修改不同的,修改数组长度时不能触发视图更新,接下来我们就来了解一下Vue中数组的响应数据变化吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>

</head>
<body>
<div id="app">
    {{list}}
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script type="text/javascript">
//提供了观察数组的变异方法,使用这些方法将会触发视图更新push()、pop()、shift()、unshift()、splice()、sort()、reverse()、会改变原数组

//不能触发视图更新
/*
利用索引直接设置一个项时
修改数组长度时

 */


    let vm = new Vue({
    el:"#app",
    data:{
        list:[1,2,3]   //只有计划好的数据,才能做响应   reverse
    }
    })
    vm.list.push(1111);
    console.log(vm.list);
    //那么怎么办呢,直接赋值改变
    vm.list = vm.list.map(item=>item*3)

    //通过下标是不能够改变数组的值的
    //vm.list[0]='aiqianduan'

    //可以这样使用 改变数组第1项,改变一位,值为aiqianduan
    //vm.list.splice(0,1,'aiqianduan');


    vm.list.push();
    //动用push触发更新,单纯的修改length是不会有反应的
    vm.list.length=1;

</script>

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注