DAY 11 - V-for 渲染列表，輸入key值的重要性

v-for 渲染列表

我們什麼情況下會用到 v-for 呢 ?
我有一大筆資料想要讓他依序顯示在畫面，這時候v-for就派上用場啦，他會幫我們依照指定的方式渲染至畫面，常用在串接資料後我們要將他依序渲染至畫面，接著我們看看範例 :

我們先寫一個陣列 lists 裡面寫入選項 1 ~ 選項3 ，然後template 加入 v-for = " item (各筆資料) in lists(data裡的資料) "

然後接著就可以代入對應屬性 id、name，item.[屬性]，這時候畫面就會顯示 :

• no.1 / 選項 1
• no.2 / 選項 2
• no.3 / 選項 3

成功渲染列表了 !!

這邊分隔符我們使用 in ，也可使用 of 就會變成 v-for = " item of lists " 也是一樣效果

也可以設定一組數組讓他依照順序渲染

v-for 綁定 v-key 指定 ID

在使用 v-for 進行列表渲染時別忘了加一個:key，這就像是他的專屬鑰匙 ID 一樣，在做資料處理就會辨認他的 ID 進行資料變動

寫法範例
v-for="user in users" :key="user.id"

v-if 和 v-for　不要同時使用

v-if、v-for 裡不建議同時使用，官方文件裡有提到兩者因執行順序不同容易造成衝突，來看看下面範例 :
我想在畫面呈現出對應的使用者(false 不顯示在畫面上)，然後篩選出 true 顯示使用者

先試著寫一起看看 > 哪尼 !? 竟然報錯究竟是要先渲染還是先判斷呢 ?

在 Vue2、3 兩者執行優先順序不同， Vue2裡 v-for 優先於 v-if ，而 Vue3裡 v-if 優先於 v-for(所以報錯)
所以為了避免錯誤，會建議避開讓兩者錯開，來看看改寫後:

今天來到 Vue 指令篇的最後一篇了，這幾天雖然教的都是一些基礎，但是都是實戰很常會運用到，也是很多面試官會考的基本觀念，在之前雖然我在學 option api 時有學會了指令，但是再實作上發現一知半解，常常要寫指令不知道下在哪，寫了也不知道對了沒，所以才會有了這幾篇指令的加強觀念，順便釐清一些容易混淆的觀念。