微信小程序中数据绑定的3个小应用

微信小程序中数据绑定的3个小应用

---

01 简单绑定

WXML 中的动态数据均来自对应 Page 的 data。
数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：
内容：

<view> {{ message }} </view>

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

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

<view id="item-{{id}}"> </view>

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

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

<view wx:if="{{condition}}"> </view>

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

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

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

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

02 运算

三元运算

代码：

<!--pages/test/test.wxml-->
<!--运算  -->
<view hidden="{{flag ? true : false}}"> Hidden </view>

 data: {
    flag:true
  }

运行结果：
当flag为false时：

当flag为true时：

算数运算

代码：

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

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

运行结果：

字符串运算

代码：

<!--pages/test/test.wxml-->
<!--字符传运算  -->
<view>{{"hello " + name}}</view>

  data:{
    name: "tyl"
  }

运行结果：

循环输出

代码：

<!--pages/test/test.wxml-->
<!--字符传运算  -->
<view wx:for="{{arr}}">项目：{{item}}</view>

 data: {
    arr:[1,2,3,4,5]
  }

运行结果：

03 模块

代码：

<!--pages/test/test.wxml-->
<!--定义一个模板  -->
<template name="object">
  <view>{{a}}</view>
  <view>{{b}}</view>
</template>
<!--使用模板  -->
<template is="object" data="{{a,b}}"></template>

data: {
    a:1,
    b:2
  }

运行结果：

---

-END-