Vue常用特性-数组变异方法与动态数组响应式数据

数组变异方法

  • 在 Vue 中，直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值，你会发现，只有数据改了，但是页面内容并没有改变

  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()往数组最后面添加一个元素，成功返回当前数组的长度
pop() 删除数组的最后一个元素，成功返回删除元素的值
shift() 删除数组的第一个元素，成功返回删除元素的值
unshift() 往数组最前面添加一个元素，成功返回当前数组的长度
splice() 有三个参数，第一个是想要删除的元素的下标（必选），第二个是想要删除的个数（必选），第三个是删除 后想要在原位置替换的值
sort() sort()  使数组按照字符编码默认从小到大排序,成功返回排序后的数组
reverse() reverse()  将数组倒序，成功返回倒序后的数组

替换数组

  • 不会改变原始数组，但总是返回一个新数组

filterfilter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组
slice slice() 方法可从已有的数组中返回选定的元素。该方法并不会修改数组，而是返回一个子数组 
<body>
    <div id="app">
        <div>
            <input type="text" v-model='fname'>
            <button v-on:click='add'>提交</button>
            <button @click='del'>删除</button>
            <button @click='change'>替换</button>
        </div>
        <ul>
            <li :key='index' v-for='(item,index) in list'>{{item}}</li>
        </ul>
    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                fname: '',
                list: ['lemon', 'banana', 'apple']
            },
            methods: {
                add: function () {
                    this.list.push(this.fname);
                },
                del: function () {
                    this.list.pop();
                },
                change: function () {
                    // 替换数组
                    this.list = this.list.slice(0, 2);
                }
            }
        })
    </script>
</body>

 

动态数组响应式数据

  • Vue.set(a,b,c)    让 触发视图重新更新一遍，数据动态起来

  • a是要更改的数据 、   b是数据的第几项、   c是更改后的数据

<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(item,index) in list'>{{item}}</li>
        </ul>
        <div>{{info.uname}}</div>
        <div>{{info.age}}</div>
        <div>{{info.gender}}</div>

    </div>
    <script src="vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: ['apple', 'lemon', 'banana'],
                info: {
                    uname: 'lisi',
                    age: 18
                }
            },
            methods: {

            },
        });
        // vm.$set(vm.list, 1, 'lemon');
        // vm.$set(vm.list, 2, 'apple');
        // vm.$info.gender = 'male';
        vm.$set(vm.info, 'gender', 'female');
    </script>
</body>

 

posted @ 2020-11-30 14:57  행운의소녀  阅读(340)  评论(0)    收藏  举报