快應(yīng)用 block組件

2020-08-08 15:23 更新

block 組件是表達(dá)邏輯區(qū)塊的組件,沒有對(duì)應(yīng)的Native組件??梢允褂?lt;block>實(shí)現(xiàn)更為靈活的"列表/條件渲染"。如在<block>上使用 for 指令和 if 指令

示例如下:

<template>
  <div class="tutorial-page">
    <text onclick="toggleCityList">點(diǎn)擊:控制是否顯示城市</text>
    <div class="city" for="city in cities" if="{{showCityList === 1}}">
      <text>城市:{{city.name}}</text>
      <block if="{{city.showSpots}}" for="{{city.spots}}">
        <text>景點(diǎn):{{$item.name}}</text>
      </block>
    </div>
  </div>
</template>

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

<script>
  import {dataDirective} from '../../Common/js/data'

  export default {
    private: {
      showCityList: 1,
      cities: dataDirective
    },
    onInit () {
      this.$page.setTitleBar({ text: '組件block' })
    },
    toggleCityList () {
      this.showCityList = this.showCityList === 1 ? 0 : 1
    }
  }
</script>

這個(gè)示例有點(diǎn)復(fù)雜,綜合了前述的知識(shí)點(diǎn)。對(duì)示例中的變量解釋如下:

  • showCityList 用于控制是否在頁面中生成列表元素即城市的列表
  • cityList 數(shù)組代表需要列表渲染的城市列表數(shù)據(jù)
  • cityList 數(shù)組的每個(gè)元素中的 showSpots,決定了是否顯示當(dāng)前 city 的 spots 數(shù)據(jù)

讀者可以看到,通過這些組合,可以表達(dá)復(fù)雜的業(yè)務(wù)邏輯


以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)