最近幾個月小生一直在學習vue.js，也分享了許多vue常用列子，每個列子都是小生自己在專案中積累下來的，經過測試無bug後修改成列子與走在前端路上的朋友一同進步。接下來小生將圍繞小程式來寫列子，誰叫2018年小程式火的如日中天呢。

這一篇將圍繞小程式的條件渲染來寫：

所謂條件渲染簡而言之，就是當滿足什麼條件的事執行什麼事件。我們在專案中常用到選項卡，根據選項來判斷來觸發事件；

下面我們細講

在此之前 希望你是仔細閱讀了小程式 api文件的

二、

1. 新增需要的元件。在頁面的 json 中配置（路徑根據自己專案位置配置）：

"usingComponents": {
    "i-button": "../../dist/button/index"
}
 

以下為我自己所需要的外掛

{
  "component": true,
  "usingComponents": {
    "i-button": "../../dist/button/index",
    "i-avatar": "../../dist/avatar/index",
    "i-notice-bar": "../../dist/notice-bar/index",
    "i-toast": "../../dist/toast/index",
    "i-card": "../../dist/card/index",
    "i-spin": "../../dist/spin/index",
    "i-drawer": "../../dist/drawer/index",
    "i-icon": "../../dist/icon/index",
    "i-tabs": "../../dist/tabs/index",
    "i-tab": "../../dist/tab/index"
  }
}
 

三，在wxml中

<i-tabs current="{{ current }}" bindchange="handleChange">
  <i-tab key="1" title="選項1"></i-tab>
  <i-tab key="2" title="選項2"></i-tab>
</i-tabs>
<view wx:if="{{tab1}}" class='tab1'>
  我是選項一，我的目標是學精學細
</view>
<view wx:if="{{tab2}}" class='tab2'>
  我是選項二，我的目標是擁有自己的專業技巧
</view>
 

 四,在js中寫事件和判斷條件

Page({
  data: {
     current: '1',
      tab1: true
  
  },

handleChange({ detail}) {
   var index = detail.key
    console.log(index)
    this.setData({
      current: detail.key
    });
    if(index == 1){
      this.setData({
        tab1:true,
        tab2: false
      })
    }else if(index == 2){
      this.setData({
        tab1: false,
        tab2:true
      })
    }
    
  },
})

五、效果如下