「Vue.js 學習筆記 Day7」- v-for 列表渲染（實作篇）

程式海無涯，聽說永遠學不完，那我只好一點一點把它們寫下來囉！

前一篇我們介紹關於 v-for的渲染畫面的基礎方式，而這一篇的重點將著重在 v-for 的實作上。

Photo Credit by Jamie Davies from unsplash

以下分為兩個情境來分享：

v-for 與 v-if 條件渲染

若是 v-for搭配 v-if ，如同 if / else 的用法，在樣板上設立判斷資料，呈現所需的資料內容。

當 v-for和 v-if一起使用，而且兩者是在同一節點時，v-for 的優先級比 v-if 更高。

舉例來說，筆者是個棒球痴，想知道現在打擊率超過 3 成的選手有哪些，因此，我透過下列的程式碼來幫助我設立條件來處理資料。

程式碼執行邏輯如下，首先透過 v-for取得 playerList 當中的三筆資料，接著，再透過v-if 進行條件篩選，將打擊率超過 3 成的選手渲染在畫面上。

渲染結果如下：

v-for 字串篩選

若是使用 v-for搭配 v-model ，我們可以讓使用者自行輸入字串，並透過字串來過濾資料。

舉例來說，我想要在合計五筆球員名單的資料庫當中，找出屬於「中信兄弟」的球員，一樣可以透過下列程式碼來執行。

程式碼執行邏輯如下：

Step 1：透過 v-model 取得使用者輸入的字串，並存入 filterText 變數。

Step 2：透過 v-on:keyup.enter 觸發 filterData 事件。

Step 3：透過 filterData 事件比對 arrayData 取出符合 filterText 的資料，再存入 filterArray 使用。

Step 4：最後，透過v-for 進行資料渲染，將filterArray 的內容逐一渲染至瀏覽器畫面。

渲染結果如下：

上述案例主要是 vm.arrayData 搭配 filter() 的用法來過濾資料。

陣列操作方法

接下來，讓我們介紹一些常見的陣列操作方法：

• filter()：過濾陣列元素，並將符合條件的元素回傳成為一個新陣列
• push()：新增元素
• pop()：刪除最新加入的元素
• shift()：刪除第一個 (即最舊的) 元素
• unshift()：加入元素至第一個位置
• splice()：加入或移除元素，可指定元素位置
• sort()：由小至大排序
• reverse()：元素反序排列
• concat()：連接陣列，會返回一個新的陣列
• slice()：切割陣列，會返回一個新的陣列

Photo Credit by Eric Vadeboncoeur from unsplash

結語

雖然是最基礎的內容，但文字的紀錄，不僅有助於反思過往的學習內容，也在發想v-for 案例時，無形中又再次練習了一次。

因此，我相當鼓勵大家開始經營屬於你的部落格，一起學習，一起加油！

謝謝你的閱讀！如果有任何想法，也歡迎留言與我分享～
如果願意給我一些小小鼓勵，請給我 1–20 個拍手；
如果覺得文章對你有點幫助，請給我 21-30 個拍手；
如果非常喜歡我的技術筆記，請長按拍手按鈕（50個拍好拍滿）讓我知道哦 👏🏻
最後，若希望持續追蹤我的最新文章，別忘了追蹤 皮爾斯的自學旅程 唷，乾溫 :D