• vue遍历数组和对象的方法以及他们之间的区别


    前言:vue不能直接通过下标的形式来添加数据,vue也不能直接向对象中插值,因为那样即使能插入值,页面也不会重新渲染数据

    一,vue遍历数组

       1,使用vue数组变异方法

              pop() 删除数组最后一项

              push() 往数组里面末尾增加一项

              shift() 删除数组第一项

              unshift() 往数组第一项里面加一些内容

              splice() 向数组里面增加一项或删除一项

              sort() 数组排序

              reverse() 对数组取反

       2,数组的引用

            数组在js中是引用类型,重新给需要改变的数组进行定义并赋值,即对象引用方法

       3,vue set方法

            以下面数组为例

                tabList:[1,2,3,4,5 ]

           1)全局set方法使用

               Vue.set(vm.tabList,1,10) //将数组下标为1的值改为10

           2)实例set方法使用

               vm.$set(vm.tabList,1,10) //将数组下标为1的值改为10      

    二,vue遍历对象

       1,对象引用

            与遍历数组类似,重新给对象赋值(全部的值)

       2,set方法(vm是我定义vue的一个实例)

           set方法既是vue全局方法也是vue实例方法

               以下面对象为例

               tabObj{

                            name: "Guang Li",

                            sex: "男“

                         }

            1)全局set方法使用

               Vue.set(vm.tabObj,"address","BeiJing")

            2)实例set方法使用          

               vm.$set(vm.tabObj,"address","BeiJing")

       由于时间问题下回仔细说明,谢谢

       今天补充说明一下push()splice()的用法。

       假入有一个数组如下

       tableList: [{
                            a: '112301',
                            b: '大红袍超级',
                            e: '1314520',
                            c: '2018-10-1',
                            d: '成功'
                        },
                        {
                            a: '112301',
                            b: '大红袍超级',
                            e: '1314520',
                            c: '2018-10-1',
                            d: '成功'
                        },
                    ],

      1,push() ----push() 方法可把它的参数顺序添加到 tableList1的尾部。它直接修改 tableList1,而不是创建一个新的数组

            比如向数组tableList1加一个新的对象:

             this.tableList1.push(

                             {
                                a: '123',
                                b: 124'',
                                e: 124'',
                                c: 124'',
                                d: '成功'
                            }

                                );

      2,splice() --- splice() 方法向/从数组中添加/删除数据,然后返回被删除的项目。(splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。)

     

                 例如:  this.tableList1.splice(0, 1) //表示从数组第一个对象开始删除一项

  • 相关阅读:
    apache2+django+virtualenv 服务器部署实战
    从 relu 的多种实现来看 torch.nn 与 torch.nn.functional 的区别与联系
    Causal Corpus 事件因果关系语料统计
    Event StoryLine Corpus 论文阅读
    哈工大计算机网络Week2-网络应用数据交换
    哈工大计算机网络Week3-传输层
    哈工大计算机网络Week1-网络应用
    哈工大计算机网络Week0-概述
    python爬虫入门
    对scanner.close方法的误解以及无法补救的错误
  • 原文地址:https://www.cnblogs.com/lgnblog/p/9853317.html
Copyright © 2020-2023  润新知