微信登录

WXML - {{data}}双括号操作

作用:操作{{}}

数据加减乘除

  1. {{data+1}}
  2. {{data-1}}
  3. {{data*1}}
  4. {{data/1}}

数据判断

  1. <text wx:if="{{order.state==0}}">未付款</text>
  2. <text wx:else="{{order.state==1}}">已付款</text>

数据绑定

  1. <view> {{ message }} </view>
  2. Page({
  3. data: {
  4. message: 'Hello!'
  5. }
  6. })

属性数据绑定

  1. <view id="item-{{id}}"> </view>
  2. Page({
  3. data: {
  4. id: 0
  5. }
  6. })

属性绑定

  1. <view wx:if="{{condition}}"> </view>
  2. Page({
  3. data: {
  4. condition: true
  5. }
  6. })

运算 - 三元运算

  1. <view hidden="{{flag ? true : false}}"> Hidden </view>

运算 - 算术运算

  1. <view> {{a + b}} + {{c}} + d </view>
  2. Page({
  3. data: {
  4. a: 1,
  5. b: 2,
  6. c: 3
  7. }
  8. })

view中的内容为3 + 3 + d

运算 - 逻辑判断

  1. <view wx:if="{{legth>1}}"><view>

运算 - 字符串运算

  1. <view>{{"hello" + name}}</view>
  2. Page({
  3. data:{
  4. name:"Tom"
  5. }
  6. })

hello Tom

运算 - 数组运算

  1. <view wx:for={{zero,1,2,3}}><view>
  2. Page({
  3. data: {
  4. zero: 0
  5. }
  6. })
  1. # 花括号和引号之间如果有空格,将最终被解析成为字符串
  2. <view wx:for="{{[1,2,3]}} ">
  3. {{item}}
  4. </view>
  5. 等同于
  6. <view wx:for="{{[1,2,3] + ' '}}">
  7. {{item}}
  8. </view>
WXML - {{data}}双括号操作