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) //表示從數組第一個對象開始刪除一項

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM