uniapp使用條件渲染和列表渲染的方法：1、【v-if】指令用于條件性地渲染一塊內容；2、【v-show】根據條件展示元素；3、用【v-for】指令基于一個數組來渲染一個列表。

本教程操作環境：windows7系統、uni-app2.5.1版本，該方法適用于所有品牌電腦。

推薦（免費）：uni-app開發教程

uniapp使用條件渲染和列表渲染的方法：

一、條件渲染

1.v-if 指令用于條件性地渲染一塊內容

Vue is awesome! data:function() {     return {        awesome:true     //true或false     } }

2.也可以用 v-else 添加一個“else 塊”

Vue is awesome! Oh no data:function() {     return {   awesome:true    //為true時正常顯示，為false時顯示Oh no     } }

3.v-else-if，充當 v-if 的“else-if 塊”，可以連續使用

A B C Not A/B/C data:function() {     return {     type:'A'   //A或B或C  什么都不寫的話則顯示 Not A/B/C     } }

4.v-show，根據條件展示元素

Hello! data:function() {     return {  ok:true    //為true時顯示Hello!，為false時則不顯示     } }

5.v-if 與 v-show的區別

v-if 是“真正”的條件渲染，它會確保在切換過程中條件塊內的事件監聽器和子組件適當地被銷毀和重建。（在運行條件很少改變時使用）

v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS 屬性 display（none/block）。（頻繁地切換時使用）

二、列表渲染

1.用 v-for 指令基于一個數組來渲染一個列表。需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的數組元素的別名。

{{index}} : {{item.msg}} data:function() { return { items:[ {msg:'Foo'}, {msg:'Bar'} ] } }

2.在 v-for 里使用對象

{{key}} : {{value}} object:{ title:'How to do lists in Vue', author:'Jane Doe', publishedAt:'2020-3-10', }

上面兩例結果如下圖：

相關免費學習推薦：php編程（視頻）