快應用 條件指令

了解框架提供的指令與組件：for，if，show，block，slot

通過本節(jié)，你將學會：

• 指令for
• 指令if
• 指令show

教程文檔對應的項目代碼文件： src/Directive目錄

指令for

for指令用于循環(huán)輸出一個數(shù)組類型的數(shù)據(jù)

示例如下：

<template>
  <div class="tutorial-page">

    <!-- 方式1：默認$item代表數(shù)組中的元素, $idx代表數(shù)組中的索引 -->
    <div class="tutorial-row" for="{{list}}">
      <text>{{$idx}}.{{$item.name}}</text>
    </div>

    <!-- 方式2：自定義元素變量名稱 -->
    <div class="tutorial-row" for="value in list">
      <text>{{$idx}}.{{value.name}}</text>
    </div>

    <!-- 方式3：自定義元素、索引的變量名稱 -->
    <div class="tutorial-row" for="(personIndex, personItem) in list">
      <text>{{personIndex}}.{{personItem.name}}</text>
    </div>
  </div>
</template>

<style lang="less">
  .tutorial-page {
    flex-direction: column;

    .tutorial-row {
      width: 85%;
      margin-top: 10px;
      margin-bottom: 10px;
    }
  }
</style>

<script>
  export default {
    onInit () {
      this.$page.setTitleBar({ text: '指令for' })
    },
    data: {
      list: [{name: 'aa'}, { name: 'bb' }]
    }
  }
</script>

在渲染頁面時， div.tutorial-row的結構，會根據(jù)script中的數(shù)據(jù)list的定義，被循環(huán)的生成多個

注意：

• 自定義變量表示for指令的數(shù)組索引和數(shù)組元素時，變量名不可以用$或_開頭；

指令if

if 條件指令，是指 if/elif/else 這 3 個相關指令，用于控制是否增加或者刪除組件；

if/elif/else 節(jié)點必須是相鄰的兄弟節(jié)點

<template>
  <div>
    <text if="{{display}}">Hello-1</text>
    <text elif="{{display}}">Hello-2</text>
    <text else>Hello-3</text>
  </div>
</template>

<script>
  export default {
    // 頁面級組件的數(shù)據(jù)模型，影響傳入數(shù)據(jù)的覆蓋機制：private內(nèi)定義的屬性不允許被覆蓋
    private: {
      display: false
    }
  }
</script>

指令show

show 指令，是指是否顯示組件，用于控制組件的顯示狀態(tài)，并不會從 DOM 結構中刪除;

show等同于 visible=none, 主要用于在原生組件上聲明；

show 指令開始支持在自定義組件上進行聲明1050+，當這樣使用時，等同于在該自定義子組件的根節(jié)點上使用 show 指令；

對于之前版本，自定義組件不支持 show 指令的需求，可以通過 props 傳入?yún)?shù)，在自己內(nèi)部使用 show 來控制是否可見；

<template>
  <text show="{{visible}}">Hello</text>
</template>

<script>
  export default {
    // 頁面級組件的數(shù)據(jù)模型，影響傳入數(shù)據(jù)的覆蓋機制：private內(nèi)定義的屬性不允許被覆蓋
    private: {
      visible: false
    }
  }
</script>

if與show區(qū)別：

• 當 if/elif 指令的值為 false 時，節(jié)點會從頁面中移除，當 if/elif 指令值為 true，組件會動態(tài)插入節(jié)點中；
• 當 show 指令的值為 true 時，節(jié)點可見， 當其值為 false 時，組件不可見，但節(jié)點仍會保留在頁面 DOM 結構中

總結

指令for、if、show與是很常用的，掌握使用方法很有必要！