3、数据绑定 数组列表循环 条件渲染

1、text标签与view标签的区别

text 相当于以前web中的 span标签 行内元素 不会换
view 相当于以前web中的 div标签 块级元素 会换行
代码：

<!--pages/demo01/demo01.wxml-->
<!--text 相当于以前web中的 span标签 行内元素 不会换-->
<!--view 相当于以前web中的 div标签 块级元素 会换行-->
<text>demo01.wxml</text>
<text>demo02.wxml</text>
<view>demo03.wxml</view>
<view>demo04.wxml</view>

运行截图：

2、数据绑定

代码块：

<!--pages/demo01/demo01.wxml-->
<view>{{msg}}</view>
<view>数字是：{{num}}</view>
<view>布尔值：{{flag}}</view>
<view>对象的属性--姓名：{{person.name}}</view>
<view>对象的属性--性别：{{person.sex}}</view>

<!--在标签的属性中使用-->
<view data-num="{{num}}">自定义标签属性</view>

<!--使用bool类型充当属性 checked
    注意在使用bool类型时，字符串和花括号之间一定不要有空格，否则会导致识别失败
    错误示范：    <checkbox checked="     {{flag}}"></checkbox>-->
<view>
  <checkbox checked="{{flag}}"></checkbox>
</view>

Page({
  /**
   * demo01.js
   */
  data: {
    msg:"hello world!",
    num:10000,
    flag:false,
    color:"red",
    person:{
      name:"张三",
      sex:"男"
    }
  }
})

运行截图：

3、运算

运算=》 表达式
1、可以在花括号中 加入“表达式”或“语句”。
2、表达式
指的是一些简单的 运算 数字运算 字符串拼接 逻辑运算
像：数字的加减、字符串的拼接、三元表达式等
3、语句
复杂的代码段：if else；switch；do while；for循环
代码段：

<view>{{1+1}}</view>
<view>{{"1"+"1"}}</view>
<view>{{10%2===0?"偶数":"奇数"}}</view>

运行截图：

4、数组或对象循环

列表循环

1、wx:for="{{数组或者对象}}" wx:for-item=“循环项的名称” wx:for-index=“循环项的索引”
2、wx:key=“唯一的值” 用来提高列表渲染的性能

• wx:key 绑定一个普通的字符串的时候 那个这个字符串名称 肯定是 循环数组中的 对象的 唯一属性
• wx:key="*this" 表示 当前循环数组 是一个普通的数组 *this 表示循环项 ，例：[1,2,3,4,33]、[1,“aaa”,“sdaf”]
• 当出现数组嵌套循环时，要注意 已下绑定的名称不要重名： wx:for-item=“item” wx:for-index=“index”
• 默认情况下 以下代码可以不写： wx:for-item=“item” wx:for-index=“index”
  小程序也会把 循环项的名称 和 索引的名称 命名为 item index
  也就是说，假如数组只有一层循环， wx:for-item=“item” wx:for-index="index"可以省略
  代码块：

<!--wxml文件-->
<view>
  <view
    wx:for="{{list}}"    
    wx:for-item="item"   
    wx:for-index="index"
    wx:key="id"  >
      索引：{{index}}--值：{{item.name}}
  </view>
</view>

Page({
  /**
   * js文件
   */
  data: {
    list:[
      {
        id:0,
       name:"张三"
      },
      {
        id:1,
        name:"李四"
      },
      {
        id:2,
        name:"王五"
      }
    ]
  }
})

运行截图：

对象循环

对象循环与列表循环类似，采用在这里插入wx:for="{{对象}}" wx:for-item="对象的值" wx:for-index="对象的属性" 代码块，只是item和index的表述不同， 在循环对象的时候， 最好把item和index的名称都修改一下wx:for-item="value" wx:for-index="key"

代码块：

<!--wxml文件-->
<view>
  <view
    wx:for="{{person}}"    
    wx:for-item="value"   
    wx:for-index="key" 
    wx:key="name">
     属性：{{key}}--值：{{value}}
  </view>
</view>

Page({
  /**
   * js文件
   */
  data: {
    person:{
      name:"张三",
      sex:"男"
    }
  }
})

运行截图：

5、block标签

block标签： 写代码的时候标签存在，在页面渲染的时候会把它 移除掉相当于占位符的标签
案例：使用view标签时：（代码内容与上文对象循环一样）

将view标签替换成block标签时：

6、条件渲染

条件渲染有两种方式：wx:if 或者hidden属性

1. wx:if="{{true/false}}"
   wx:if
   wx:elif
   wx:else
2. hidden属性

• 在标签上直接加入属性hidden
• hidden="{{true}}"

3. 两个隐藏方法怎么选择使用

• 当标签不是频繁的切换显示 优先使用 wx:if
  直接把标签从 页面结构中移除掉
• 当标签频繁的切换显示的时候 优先使用hidden
  通过添加样式的方式来切换显示（通过修改样式中display发挥作用）
  hidden属性 不要和样式中 display一起使用
  代码块：

<!--wxml文件-->
<view>
  <view wx:if="{{true}}">显示</view>
  <view wx:if="{{false}}">隐藏</view>

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{false}}">2</view>
  <view wx:else="{{true}}">3</view>

  <view hidden="{{false}}">hidden</view>
</view>

运行截图：