微信小程序 之 数据绑定 快速复习

Posted 2022-01-12 寂静花开

目录

• • 基本数据绑定
  • 组件属性绑定：
  • 控制属性
  • 关键字绑定
  • 对象操作：

基本数据绑定

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

 <view>msg</view>

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

插值表达式内部支持计算

<view> 1 + 1 </view>

逻辑判断

<view wx:if="length > 5"> </view>

字符串运算

<view>"hello" + name</view>

组件属性绑定：

组件属性绑定，插值表达式的信息可以插入到属性中，需要再双引号之内

<view class="cname">插值属性</view>

控制属性

需要在双引号之内

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

Page(
  data: 
    condition: true
  
)

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

关键字绑定

需要在双引号之内

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

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

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

对象操作：

访问对象中的属性值（对象名称.属性名称）

 <view>
  <view>info.name</view>
  <view>info.friend.name</view>
</view>