遇見 vue.js --------阿文的vue.js學習筆記（8 —1）------- 列表渲染

**
新學習新徵程，我們一起踏上學習 vue.js的新長征

… … …

關注我，我們一起學習進步。

當我們需要將一個陣列來渲染出去的時候，通常用到的就是我們 v-for 指令.

簡單範例：
在這裡插入圖片描述

我們在使用 v-for 指令的時候，需要使用 item in items 形式的特殊語法，其中 items 是源資料陣列，而 item 則是被迭代的陣列元素的別名。

在我們的 v-for 塊中，我們可以存取所有父作用域的屬性（property）。

簡單範例： 你可以發現我們的父元素，會被新增在每一個陣列資料的後面
在這裡插入圖片描述

補充：
我們的 v-for 還支援一個可選的第二個引數，這第二個參數列示當前項的索引。（索引從0開始）

簡單範例：
在這裡插入圖片描述

第二個引數可以用任意的字母來代表，但是由於 index 的中文意思就是索引的意思，所以一般大多數情況，我們都會用 index 來寫作第二個引數；由於我們的索引都是從零開始的，假如我們需要計數從1 開始那就在後面渲染的時候，寫作 {{index+1}}

當然 v-for 也可以來遍歷一個物件的所有 property，也可以將其渲染進我們的 dom

在這裡插入圖片描述
它還可以新增兩個引數：第二個是屬性的鍵名（一般用 key 來表示），第三個引數作為屬性的索引（索引從零開始，一般呼叫 index 來表示）

我們先來看一個例子：先寫一個元件做一個按鈕，然後進行v-for 渲染下面的陣列你可以發現陣列的屬性有幾個，我們的按鈕也同樣被渲染了和屬性相同的個數
在這裡插入圖片描述
但是這樣不能區分我們的四個按鈕分別代表的是哪個，所以我們需要新增屬性

當然直接寫 v-for 這樣也是可以的，並且這裡的 10 並不來自我們 data 而是來自我們的本身
在這裡插入圖片描述
同樣，假如我們建立了一個樣式，需要呈現多個相同的樣式渲染進我們頁面，也是可以這樣寫的：

當然和 v-if 類似，我們也可以利用帶有 v-for 的 <template> 來回圈渲染一段包含多個元素的內容.

簡單範例： 迴圈渲染一個陣列，但是每個資料下還需要跟著迴圈一根下劃線，程式碼如下：
在這裡插入圖片描述

在這裡插入圖片描述
上圖是一個陣列，然後將其迴圈渲染進我們的頁面的，假如我們不想將所有的資料都渲染進來，我們想要的是顯示一個陣列經過過濾或排序後的版本，而不實際變更或重置原始資料。在這種情況下，我們可以建立一個計算屬性，來返回過濾或排序後的陣列。

簡單範例：可以看出我們經過篩選，只渲染了陣列中能整除2 的資料（也就是偶數）
在這裡插入圖片描述

瞭解：
Filter：web中的 過濾器，當存取伺服器的資源時，過濾器可以將請求攔截下來，完成一些特殊的功能（一般用於完成通過的操作，如：統一編碼處理、敏感字元過濾等）

當然上面的這個例子也是可以通過新增 v-if 來完成的：
在這裡插入圖片描述
當然這裡用我們前面學的 method 方法也是可以的。

**
關注校園君有話說公眾號，回覆 web前端免費領取50G 前端學習資料一份，我們一起學習進步吧。
在這裡插入圖片描述
**