3-7 Vue中的列表渲染
舉個案例：循環data中的list的值在div中，並顯示相應的index值。
關於數組的循環：
//顯示效果如下圖：
//一般的列表渲染最好帶一個key值，要把key值設置為唯一值的話，可以選擇index。但在頻繁操作DOM元素相對應的數據的時候，它還是有點浪費性能，可能讓Vue沒法充分復用DOM節點，所以不太建議用index來做key值
//所以一般的項目中的後端會傳遞過來一些數據，這些數據可以把它作為key值來使用（一般會攜帶一個後端或數據庫相關的一個唯一的數據條目標識符，例如：id）
//修改如下圖所示：
//把key值設置成（item.id）既是唯一的，同時又不是index下標，就能保證key值的使用最終是正確的，性能上最高
//在使用key值的時候，每個循環項最好帶一個key值，提高性能；為了讓key值達到最優效果，就要把key設為唯一的，盡量不用index下標作為key值
===============================================================
接下來講解一下：如何動態的往列表裏添加內容
//如上，運用數組中的push()方法，當往數組裏添加內容的時候頁面會自動的響應出增加的內容
//如上，當直接用下標的方法來添加數組內容的時候，頁面上並沒有把添加的數據顯示出來。然後在控制臺中輸入vm.list來查看數據的時候，發現裏面是有數據的添加的，只是沒有顯示在頁面上而已
//總結：當我們去嘗試更改數組裏面的內容的時候，不能直接通過下標的形式來改變數組；只能通過Vue提供的幾個數組變異方法來操作數組，才能夠實現數據變化，頁面也跟著變化
Vue中一共提供了7種數組的變異方法：pop（把數組最後一項刪除掉）、push（往數組裏增加一條）、shift（刪除數組裏的第一項）、unshif（往數組裏的第一項增加內容）、splice（數組的截取/操作方法）、sort（對數組進行排序）、reverse（對數組進行取反）
//接下來講解一下：把頁面上的數據George修改為Rose
方法一：改變數組的內容
//用splice()的方法來改變Gerorge，表達式中寫入(1,1,{id:‘001‘,text:‘Rose‘})即可。 表達式中第一個1表示數組中的第一項(即list[1])，第二個1表示刪除一條內容，{id:‘001‘,text:‘Rose‘}表示往裏增加一條內容
方法二：改變數組中的數據引用
//改變數據上新的引用，直接把數據的第二項（即list[1]的text直接修改）
若要在div外再循環一個span標簽，可以用template方法來實現效果，代碼如下圖：
//顯示效果如下： div和span標簽都循環了
//用template模板占位符可以去包裹一些元素，但是在循環的過程中，他並不會真正的被渲染到頁面上
==================================================
關於對象的循環：
//顯示效果如下：
//如上，key值指向的就是這個對象中的鍵名（例：name），而item值指向的就是這個對象的鍵值（例：‘George’），index值指向的就是它在對象中的第幾個位置
===============================================================
接下來講解一下：如何動態的往列表裏添加內容
//如上，當改userInfo的name值時，數據變了，頁面也跟著改變了。而當你添加一個新的數據時，數據有發生變化，但是頁面上並沒有顯示出來效果。所以說，當在遍歷對象的時候，直接動態的往對象裏面加值是不好用的。但是如果硬要是往裏面添加的話呢，就類似於數組一樣，直接把對象的引用賦值進去改變就行了（會比較麻煩）
//操作如下：
3-7 Vue中的列表渲染