03-Vue入門系列之Vue清單渲染及條件渲染實戰

有時候我們要根據資料的情況，決定标簽是否進行顯示或者有其他動作。最常見的就是，表格渲染的時候，如果表格沒有資料，就顯示無資料。如果有資料就顯示表格資料。 Vue幫我們提供了一個<code>v-if</code>的指令，幫助我們完成判斷的模闆處理。

<code>v-if</code>指令可以根據資料綁定的情況進行插入标簽或者移除标簽。 當然，如果熟悉js的都清楚，有if，肯定會有else。 Vue提供的是 <code>v-else</code>指令。

模闆引擎都會提供循環的支援。Vue也不例外，Vue是提供了一個<code>v-for</code>指令。基本的用法類似于foreach的用法。還是看例子最直接，上代碼：

上面的例子，我們示範的是 每次循環輸出一個tr标簽。如果我們希望每次循環生成兩個tr标簽呢？如果還有生成其他的标簽呢？

Vue給我們提供了template标簽，供我們用于v-for循環中進行處理。

上代碼喽：

由于Vue的機制就是檢測資料的變化，自動跟新HTML。數組的變化，Vue之檢測部分函數，檢測的函數執行時才會觸發視圖更新。這些方法如下：

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

下面是一個綜合的案例，每秒鐘往表格中添加一條資料。 本案例綜合使用了v-if 和 v-for循環綜合案例。

清單的使用其實本質還是js的衍生使用，對于有js開發基礎的沒有什麼難度。關鍵是多寫幾個案例就會詳細通了。