03 Vue入門系列之Vue列表渲染及條件渲染實戰

有時候我們要根據資料的情況，決定標籤是否進行顯示或者有其他動作。最常見的就是，**渲染的時候，如果**沒有資料，就顯示無資料。如果有資料就顯示**資料。 vue幫我們提供了乙個v-if的指令，幫助我們完成判斷的模板處理。

data:

});v-if指令可以根據資料繫結的情況進行插入標籤或者移除標籤。 當然，如果熟悉js的都清楚，有if，肯定會有else。 vue提供的是v-else指令。

模板引擎都會提供迴圈的支援。vue也不例外，vue是提供了乙個v-for指令。基本的用法類似於foreach的用法。還是看例子最直接，上**：

年齡位址

}}}data: ,,]

}});

上面的例子，我們演示的是 每次迴圈輸出乙個tr標籤。如果我們希望每次迴圈生成兩個tr標籤呢？如果還有生成其他的標籤呢？

vue給我們提供了template標籤，供我們用於v-for迴圈中進行處理。

上**嘍：

下面是乙個綜合的案例，每秒鐘往**中新增一條資料。 本案例綜合使用了v-if 和 v-for迴圈綜合案例。

年齡位址

0"> 
}}}沒有資料奧！
data: 
});// 每秒鐘插入一條資料。
setinterval(function () , 1000);

03 Vue入門系列之Vue列表渲染及條件渲染實戰

有時候我們要根據資料的情況，決定標籤是否進行顯示或者有其他動作。最常見的就是，渲染的時候，如果 沒有資料，就顯示無資料。如果有資料就顯示 資料。vue幫我們提供了乙個v if的指令，幫助我們完成判斷的模板處理。data v if指令可以根據資料繫結的情況進行插入標籤或者移除標籤。當然，如果熟悉js的...

03 Vue入門系列之Vue列表渲染及條件渲染實戰

有時候我們要根據資料的情況，決定標籤是否進行顯示或者有其他動作。最常見的就是，渲染的時候，如果 沒有資料，就顯示無資料。如果有資料就顯示 資料。vue幫我們提供了乙個v if的指令，幫助我們完成判斷的模板處理。data v if指令可以根據資料繫結的情況進行插入標籤或者移除標籤。當然，如果熟悉js的...

03 vue元件技術

01 vue語法基礎 02 vue資料繫結與指令 03 vue元件技術 04 vue單檔案元件定義與使用 元件是vue.js最強大的功能之一。元件是可復用的vue例項，且帶有乙個名字，通過元件封裝可重用的 在較高層面上，元件是自定義元素。元件名對應標籤名，標籤名不允許出現大寫字母，因此元件名包含多個...