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

2021-09-08 19:47:15 字數 954 閱讀 5050

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

data:

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

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

年齡位址

}}}data: ,,]

}});

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

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

上**嘍:

由於vue的機制就是檢測資料的變化,自動跟新html。陣列的變化,vue之檢測部分函式,檢測的函式執行時才會觸發檢視更新。這些方法如下:

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

年齡位址

0">

}}}沒有資料奧!

data:

});// 每秒鐘插入一條資料。

setinterval(function () , 1000);

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

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例項,且帶有乙個名字,通過元件封裝可重用的 在較高層面上,元件是自定義元素。元件名對應標籤名,標籤名不允許出現大寫字母,因此元件名包含多個...