微信小程序学习笔记 WXML 详解 wx:if wx:for

WXML 详解
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

以下一些简单的例子来看看 WXML 具有什么能力：

一.数据绑定

WXML中的动态数据均来自对应js文件中的Page的data，在js中访问Page的data用this.data,改变data中的某个属性的值用setData()方法。

简单绑定数据

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

（1）作用于内容

//1.作用于内容不用写“”，直接{{变量}}
<view>{{title}}</view>

  data: {
      title:"标题"
  },

注意：作用于内容不用写“”，直接{{变量}}

（2）作用于组件属性

<!-- 2.作用于属性 -->
<view id='item-{{id}}'>"作用于属性"</view>

 data: {
     id:0
  },

注意：因为外面已经有‘’所以{{}} 不用再包双引号

（3）作用于控制属性

<!-- 作用于控制属性 -->
<view wx:if="{{showLine}}">"showLine决定此行是否展示"</view>

  data: {
     showLine:false
  },

注意： wx:if接受boolean值可以控制组件是否展示

二.运算

可以在{{}}内进行简单的运算，支持如下几种方式：
（1）三元运算

<!-- 4.三元运算 -->
<view hidden='{{showBoolean ? true : false}}'>"showBoolean控制显示"</view>

  data: {
     showBoolean:false
  },

（2）算数运算

<!-- 5.算数运算 -->
<view>{{a+b}}+{{c}}+d</view>

 data: {
      a:1,
      b:2,
      c:3,
      d:4
  },

显示结果：3+3+d

（3）逻辑判断

<!-- 判断逻辑 -->
<view wx:if="{{length>5}}">判断逻辑</view>

（4）字符串运算

<!-- 7.字符串运算 -->
<view >{{"hello"+title}}</view>

  data: {
      title:"标题"
  },

显示结果：hello标题

三.组合

可以在Mustache内直接进行组合，构成新的对象或者数组
（1）数组组合

<!--8. 数组组合 -->
<view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>

data: {
   zero:0
  },
显示结果：0，1，2，3，4

（2）对象组合

<!--9. 对象组合 -->
<template data="{{for:a,bar:b}}"></template>

data接受一个对象因为已经有了两个大括号了，不必再写第三个括号，直接写key 和value，for为key ,a为值 a 这个值就会去js中data里面去找，bar为key ，b为值也会去js中data里面去找，两者组合在一个对象里面。
（2）对象展开
也可以用扩展运算符 ...来将一个对象展开

<!--10.扩展对象 -->
<template data="{{...bean1,...bean2,e:5}"></template>

data: {
    bean1: {
      a: 1,
      b: 2
    },
    bean2: {
      c: 1,
      d: 2

    }
  },

组合结果：1，2，1，2，5

如果对象的key和value相同，也可以间接的表达

<template data="{{a,b}}"></template>

data: {
    a: 1,
    b: 2
}

对象组合：{a:1,b:2}

上述方式可以随意组合，但是如有存在变量名相同的情况，后边的会覆盖前面的

四.条件渲染

wx:if
在框架中，我们用wx:if="{{condition}}"来判断是否要渲染该代码

<view wx:if="{{showLine}}">"showLine决定此行是否展示"</view>

也可以用wx：elif 和wx：else来添加else块

<view wx:if="{{d<2}}">展示1</view>
<view wx:elif="{{d<3}}">展示2</view>
<view wx:else="{{d<6}}">展示3</view>

显示结果：展示3

block wx:if

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

<!-- block标签 -->
<block wx:if="{{true}}">
<view >展示1</view>
<view >展示2</view>
</block>

注意<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

这里面的block 可以用view 代替，但是用block就是不会渲染，展示页面会更快

五.列表渲染

wx:for
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件，默认数组的当前想的小标变量默认为index，数组当前项的变量名默认为item

<!-- 列表渲染 -->
<view wx:for="{{list}}">
  <view>{{index}}:{{item}}</view>
</view>

data:{
  list:[
      "元素1",
      "元素2",
      "元素3",
      "元素4"
    ]
}

使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名

<!-- 列表渲染 -->
<view wx:for="{{list}}" wx:for-index="in"  wx:for-item="ite">
<view>{{in}}:{{ite}}</view>
</view>

wx:for 也可以嵌套，下边是个九九乘法表

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}} "  wx:for-item="i">
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}} " wx:for-item="j">
  <view wx:if="{{ i <= j}}">{{i}} * {{j}} ={{i*j}}</view>
</view>
</view>

block:wx:for
类似block:wx:if ,也可以将wx:for用在<block/>标签上，以渲染一个包含多个节点的结构块，例如：

<view wx:for="{{list}} " >
  <view>{{index}}:</view>
  <view>{{item}}</view>
</view>

微信小程序 学习笔记 WXML 详解 wx:if wx:for