微信小程序語法WXML

view標簽是我們開發過程中最常用的標簽了，這個就相當於Html中的div。

text標簽也是我們開發中常用的，這個相當於Html中的span

image標簽相當於我們Html中的img。

官方文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

數據綁定

在小程序中，使用 WXML 語言所提供的數據綁定功能，來完成界面的實時更新。

data: {
　　msg:"hello world",
　　num: 18,
  },

引用數據

　　通過{{}}的方式可以引用數據。

<view>{{msg}},{{num + 10}}</view>

邏輯渲染

    <!-- wx:if 相當於vue中的 v-if -->
    <view class="img1" wx:if='{{length == "first"}}'>
      <text>{{msg.img1}}</text>
    </view>
    <!-- wx:elif 相當於vue中的 v-else-if -->
    <view class="img1" wx:elif='{{length == "second"}}'>
      <text>{{msg.img2}}</text>
    </view>
     <!-- wx:else 相當於vue中的 v-else -->
    <view class="img1" wx:else>
      <text>{{msg.img3}}</text>
    </view>

　　因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

  <!-- 也可以在對應data定義true和false -->
  <block wx:if="{{true}}">
    <view> view1 </view>
    <view> view2 </view>
  </block>

　　除此之外微信小程序還可以通過hidden屬性進行條件渲染。wx:if在不滿足條件的時候會刪除掉對應的DOM，hidden屬性則是通過display屬性設置為none來進行條件渲染。

 <!-- 也可以在對應data定義true和false,true為隱藏 -->
  <view hidden="{{true}}">
    隱藏
  </view>