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

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

推薦（免費(fèi)）：uni-app開發(fā)教程

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

一、條件渲染

1.v-if 指令用于條件性地渲染一塊內(nèi)容

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

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

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

3.v-else-if，充當(dāng) v-if 的“else-if 塊”，可以連續(xù)使用

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

4.v-show，根據(jù)條件展示元素

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

5.v-if 與 v-show的區(qū)別

v-if 是“真正”的條件渲染，它會(huì)確保在切換過程中條件塊內(nèi)的事件監(jiān)聽器和子組件適當(dāng)?shù)乇讳N毀和重建。（在運(yùn)行條件很少改變時(shí)使用）

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

二、列表渲染

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

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

2.在 v-for 里使用對(duì)象

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

上面兩例結(jié)果如下圖：

相關(guān)免費(fèi)學(xué)習(xí)推薦：php編程（視頻）