从入门到放弃:微信小程序入门个人指南Day 5

1. 数据绑定:wxml中的动态数据均是来自对应js文件中page的data.在js中访问pahe的data用this.data,改变data中某个属性的值用setData()方法.
        1.1简单绑定:数据绑定使用Mustache语法(双大括号)将变量抱起来,可以作用与以下区域:
        (1)作用于内容:
            wxml:{{message}}4
            js:Page({
                  data:{
                  message:"hello world"
                  }
            })

        (2)作用于组件的属性
            wxml:
            js:Page({
                  data:{
                  id:0
                  }
            })

        (3)作用于控制属性
            wxml:
            js:Page({
                  data:{
                  condition:true
                  }
            })

    2. 运算
        (1)三元运算
            
        (2)算数运算
            wxml:{{a+b}}+{{c}}+d
            js:Page({
                  data:{
                      a=1,
                      b=2,
                      c=3
                  }
            })
        (3)逻辑判断
            

        (4)字符串运算
            wxml:{{"hello"+name}}
            js:Page({
                  data:{
                      name:"world"
                  }
            })

    3. 组合:可以在Mustache内直接进行组合,构成新的对象或者数组
        (1)数组组合
            wxml:{{[zero,1,2,3,4]}}
                js:Page({
                      data:{
                          zero:0
                      }
                })

        (2)对象组合
            wxml:
            js:Page({
                  data:{
                      a:1,
                      b:2
                  }
            })

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

    4. 条件渲染 
        (1)wx:if:在框架中,我们用wx:if="{{condition}}"来判断是否需要渲染该代码
        (2)block wx:if:判断多个属性可以使用标签将多个组件包装起来,并在上边使用wx:if控制属性

    5. 列表渲染
        wx:for:在组件上使用控制属性绑定一个数组,即可使用数组中各项数据重复渲染该组件,默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item
            
                {{index}}:{{item.message}}
            

            page({
                data:{
                    items:[{
                        message:"foo"
                    },{
                        message:"age"
                    }]
                }
            })

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

 

wxml.js

Page({
  data: {
    message:"hello world",
    message2: {
      abc:'123'
    },
    id:0,
    condition:true,
    flag:2,
    a:1,
    b:2,
    c:3,
    length:5,
    name:"world",
    zero:0,
    obj1:{
      a:1,
      b:2,
      c:3
    }, 
    obj2: {
      a: 1,
      b: 2,
      c: 3
    },
    items: [{
      message: "foo"
    }, {
      message: "age"
    }]
  },
  switchCondition:function(e){
    this.setData
  }
})

WXML.wxml

  简单绑定
  {{message}}
  {{message2.abc}}
  组件属性
  通过调试器查看该属性
  控制属性
  
  condition为true显示
  三元运算
  
  算数运算
  {{a + b}} + {{c}} + d
  逻辑判断
  {{length}}
  字符串判断
  {{"hello "+name}}
  数组组合
  {{item}}
  
  
  
  对象组合
  
  对象展开
  
  条件渲染
  1
  2
  3
  
    123
    456
  
  列表渲染
  
    {{index}}:{{item.message}}
  
  
    
      
        {{i}}*{{j}}={{i*j}}