数据绑定

• 使用双个花括号把变量包裹--{{变量}}
• {{}}花括号里面也可以使用三元表达式
• 组件的属性绑定变量需要在双引号里面

<view class="{{myClass}}">
    {{name}}
</view>
<view>
    {{isRain?'喝茶':'吃饭'}}
</view>

Page({
    data: {
        name: '森林',
        myClass: 'container',
        isRain: true,
    }
})

条件渲染

条件渲染有两种方式

• wx:if
• hidden

wx:if

• wx:if为true时，显示元素
• wx:if为false时，销毁元素

<!-- 条件渲染 -->
<!-- wx:if -->
<view wx:if="{{isIf1}}">
    isIf1
</view>
<view wx:if="{{isIf2}}">
    isIf2
</view>

Page({
    data: {
        isIf1: true,
        isIf2: false,
    }
})

也可以用 wx:elif 和 wx:else 来添加一个 else 块：

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

Page({
    data: {
        num:3
    }
})

控制多个元素的显示隐藏

• 使用<block>标签包裹需要控制的多个元素
• <block>相当于一个占位符，不渲染到页面
• 给<block>标签添加wx:if

<block wx:if="{{boolean}}">
  <view> 森林 </view>
  <view> 毛豆</view>
</block>

hidden

• hidden为true时，隐藏元素
• hidden为false时，显示元素

<!-- hidden -->
<view hidden="{{hidden1}}">
    hidden1
</view>
<view hidden="{{hidden2}}">
    hidden2
</view>

Page({
    data: {
        hidden1: true,
        hidden2: false,
    }
})

wx:if和hidden区别

• 相同点：

  • 两种方式都能控制元素的显示和隐藏

• 不同点：

  • wx:if是通过新建和销毁元素进行显示与隐藏

  • hidden是通过添加样式实现显示隐藏

列表渲染

wx:for渲染列表

• 使用：wx:for="{{list}}"
• 默认的索引为index
• 使用wx:for-index修改索引值
• 默认的元素为item
• 使用wx:for-item修改元素值

wx:key

• wx:key列表中的唯一标识符

• wx:key有两种不同的写法

  • 普通数组：wx:key="*this"
  • 数组对象：wx:key="字符串" 。表示对象的唯一标识，一般是id

<!-- 列表渲染 -->
<view wx:for="{{list}}" wx:key="*this">
    {{item}}
</view>
<view wx:for="{{listObj}}" wx:for-index="i" wx:for-item="el" wx:key="id">
    索引:{{i}} 元素:{{el}} 名字:{{el.name}}
</view>

Page({
    data: {
        list: [1, 2, 3, 4, 5],
        listObj: [
            { id: 1, name: '森林' },
            { id: 2, name: '毛豆' },
            { id: 3, name: '坦克' },
        ]
    }
})