首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue常用特性-数组变异方法与动态数组响应式数据

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

作者头像
梨涡浅笑
发布2020-12-02 15:42:49
1.2K0
发布2020-12-02 15:42:49
举报
文章被收录于专栏:全栈自学笔记全栈自学笔记

数组变异方法

  • 在 Vue 中,直接修改对象属性的值无法触发响应式。当你直接修改了对象属性的值,你会发现,只有数据改了,但是页面内容并没有改变
  • 变异数组方法即保持数组方法原有功能不变的前提下对其进行功能拓展

push()

往数组最后面添加一个元素,成功返回当前数组的长度

pop()

删除数组的最后一个元素,成功返回删除元素的值

shift()

删除数组的第一个元素,成功返回删除元素的值

unshift()

往数组最前面添加一个元素,成功返回当前数组的长度

splice()

有三个参数,第一个是想要删除的元素的下标(必选),第二个是想要删除的个数(必选),第三个是删除 后想要在原位置替换的值

sort()

sort() 使数组按照字符编码默认从小到大排序,成功返回排序后的数组

reverse()

reverse() 将数组倒序,成功返回倒序后的数组

替换数组

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

filter

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。

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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-11-30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 数组变异方法
  • 替换数组
  • 动态数组响应式数据
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档