WXML语法

1.数据绑定

• 将数据仓库data中的数据绑定显示在页面中。
• 语法：{ { 变量 }}，称为“Mustache”语法，也称为插值表达式
• 作用：用于在页面中插入值，进行数据的绑定显示，且当值发生变化时页面会重新渲染加载，称为响应式特性，即数据状态同步。

wxml示例代码：

<!--
    数据绑定
-->
<view class="title">数据绑定</view>
<view>{
  { name }}</view>
<!-- 可以为属性绑定值 -->
<view id="{
    { name }}">姓名</view>
<view>{
  { age }}</view>
<view>{
  { bool }}</view>
<view>{
  { str }}</view>
<view>{
  { arr }}</view>
<!-- 自定义对象会显示为object -->
<view>{
  { user }}</view>
<view>{
  { time }}</view>
<!-- 当值为undefined或变更不存在时，显示空字符串 -->
<view>{
  { hobby }}</view>
<view>{
  { address }}</view>
<view>---------------------------------</view>
<!--
  简单的运算操作
-->
<view>{
  { age + 2 }}</view>
<view>{
  { bool && false }}</view>
<view>{
  { age < 18 }}</view>
<view>{
  { age >= 18 ? '成年人' : '未成年人' }}</view>
<view>{
  { user.name }}</view> 
<view>{
  { arr[2] }}</view> 
<view>---------------------------------</view>
<!--
  直接定义值
-->
<view>{
  { 'rick' }}</view>
<view>{
  { 38 }}</view>
<view>{
  { true }}</view>
<view>{
  { [1,2,3,4,5] }}</view>
<view>{
  { {username:'leo',password:'xxxxxx'} }}</view>  <!-- 直接定义对象时两边必须有空格 -->
<!-- 不能在插值表达{
   {}}中调用JS内置对象 -->
<!-- <view>{
   { new Date() }}</view> -->

js示例代码：

Page({
   
  data:{
   
    name:'rick',
    age:18,
    bool:true,
    str:null,
    arr:[1,3,5,7,9],
    user:{
   
      id:9527,
      name:'周星驰',
      age:27
    },
    time:new Date(),
    hobby:undefined
  }
})

2.条件和列表渲染

• 条件渲染：语法 wx:if=“”，判断是否需要渲染组件，取值可以是任意类型，最终都会转换为boolean，根据boolean结果，执行元素的创建和删除操作，控制元素的显示隐藏
• 列表渲染：语法 wx:for=“”，循环多次渲染组件，取值为Array|Object|number|string，会基于数据重复渲染组件，用于循环数据，循环时默认使用index和item表示当前元素的下标变量名和元素变量名

wxml示例代码：

<!-- 条件和列表渲染 -->
<view class="title">条件和列表渲染</view>
<view style="width:100rpx;height:100rpx;background: red;" wx:if="{
    { bool }}"></view>
<!-- 使用wx:elif 和 wx:else -->
<view wx:if="{
    { age <= 6 }}">童年</view>
<view wx:elif="{
    { age <= 18 }}">少年</view>
<view wx:elif="{
    { age <= 60 }}">中年</view>
<view wx:else>老年</view>
<view>---------------------------------</view>
<!-- 可以使用<block>标签将多个组件包装起来，不控制页面结构 -->
<block wx:if="{
    { name == 'rick' }}">
  <text>aaa</text>
  <text>bbb</text>
  <text>ccc</text>
</block>

<!--
  列表渲染
    1.循环时默认使用index和item表示当前元素的下标变量名和元素变量名
    2.可以指定wx:key属性，作用：1）提升性能 2）跟踪每个节点的身份状态
-->
<!-- 循环数组 -->
<view wx:for