<legend id="h4sia"></legend><samp id="h4sia"></samp>
<sup id="h4sia"></sup>
<mark id="h4sia"><del id="h4sia"></del></mark>

<p id="h4sia"><td id="h4sia"></td></p><track id="h4sia"></track>

<delect id="h4sia"></delect>
  • <input id="h4sia"><address id="h4sia"></address>

    <menuitem id="h4sia"></menuitem>

    1. <blockquote id="h4sia"><rt id="h4sia"></rt></blockquote>
      <wbr id="h4sia">
    2. <meter id="h4sia"></meter>

      <th id="h4sia"><center id="h4sia"><delect id="h4sia"></delect></center></th>
    3. <dl id="h4sia"></dl>
    4. <rp id="h4sia"><option id="h4sia"></option></rp>

        0411-39943997
        工作时间:周一至周日 8:30-22:00
        技术文库
        Technical Library

        小程序视图层WXML中数据绑定

        标签: 小程序开发  访问: 18622018-01-26

        数据绑定

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

        简单绑定

        数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于:

        内容

         {{ message }} 
        Page({
          data: {
            message: 'Hello MINA!'
          }
        })

        组件属性(需要在双引号之内)

         
        Page({
          data: {
            id: 0
          }
        })

        控制属性(需要在双引号之内)

         
        Page({
          data: {
            condition: true
          }
        })

        关键字(需要在双引号之内)

        true:boolean 类型的 true,代表真值。

        false: boolean 类型的 false,代表假值。

         

        特别注意:不要直接写 checked="false",其计算结果是一个字符串,转成 boolean 类型后代表真值。

        运算

        可以在 {{}} 内进行简单的运算,支持的有如下几种方式:

        三元运算

         Hidden 

        算数运算

         {{a + b}} + {{c}} + d 
        Page({
          data: {
            a: 1,
            b: 2,
            c: 3
          }
        })

        view中的内容为 3 + 3 + d

        逻辑判断

         5}}"> 

        字符串运算

        {{"hello" + name}}
        Page({
          data:{
            name: 'MINA'
          }
        })

        数据路径运算

        {{object.key}} {{array[0]}}
        Page({
          data: {
            object: {
              key: 'Hello '
            },
            array: ['MINA']
          }
        })

        组合

        也可以在 Mustache 内直接进行组合,构成新的对象或者数组。

        数组

         {{item}} 
        Page({
          data: {
            zero: 0
          }
        })

        最终组合成数组[0, 1, 2, 3, 4]

        对象

        Page({
          data: {
            a: 1,
            b: 2
          }
        })

        最终组合成的对象是 {for: 1, bar: 2}

        也可以用扩展运算符 ... 来将一个对象展开

        Page({
          data: {
            obj1: {
              a: 1,
              b: 2
            },
            obj2: {
              c: 3,
              d: 4
            }
          }
        })

        最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}

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

        Page({
          data: {
            foo: 'my-foo',
            bar: 'my-bar'
          }
        })

        最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

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

        Page({
          data: {
            obj1: {
              a: 1,
              b: 2
            },
            obj2: {
              b: 3,
              c: 4
            },
            a: 5
          }
        })

        最终组合成的对象是 {a: 5, b: 3, c: 6}

        注意: 花括号和引号之间如果有空格,将最终被解析成为字符串

        
          {{item}}

        等同于

        
          {{item}}


        Copyright© 2015 仟亿科技,All rights reserved.