微信小程序-----WXML

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

hello.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    message :'飞燕科技',
    person:{
      name:"tom",
      age:"18"
    },
    persons:[
      "tom",
      "jet"
    ]
  },

hello.wxml 

<view> {{ message }} </view>
<view> {{ person.name }} </view>
<view> {{ person.age }} </view>
<view> {{ persons[1] }} </view>

页面展示如下：

参考微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html

算数运算

hello.wxml

<view>{{person.age + 20}}</view>

输出  ：25

2、条件渲染

(1)、 wx:if

在框架中，使用 wx:if="" 来判断是否需要渲染该代码块：

hello.wxml

<view  wx:if="{{person.age >10}}">你真棒</view>
<view  wx:elif="{{person.age ==10}}">不错呦</view>
<view  wx:else>继续努力</view>

当age的值大于10时输出“你真棒”；当等于10时，输出“不错呦”（elis相当于else if）；否则“继续努力”

参考微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html

(2)、block wx:if

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

hell.wxml

<block wx:if="{{person.age >10}}">
  <view>你真棒</view>
  <view>厉害了我的祖国</view>
</block>
<block wx:elif="{{person.age ==10}}">
  <view>不错呦</view>
  <view>哎呦</view>
</block>
<block wx:else>
  <view>继续</view>
  <view>前进</view>
</block>  

age等于10时，输出：不错呦    哎呦