uniapp如何使用條件渲染和清單渲染

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程式設計（影片）

#

以上是uniapp如何使用條件渲染和清單渲染的詳細內容。更多資訊請關注PHP中文網其他相關文章！