微信小程序（三）——视图层

目录

1.数据绑定

2.运算

1.三元运算符

2.算术运算

3.逻辑判断

3.列表渲染

---

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统等，可以构建出页面的结构。

 基础组件：基础组件

事件系统: 事件系统

事件：

1.事件是视图层到逻辑层的通讯方式；

2.事件可以将用户的行为反馈到逻辑层进行处理；

3.事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数；

4.事件对象可以携带额外信息，如id，dataset，touches。

1.数据绑定

 新建一个page为index3；

在配置文件.js里面设置如下：

此时在.wxml文件里面显示数据：

最终运行效果如图：

2.运算

1.三元运算符

<view ><checkbox checked="{{ischecked?true:false}}" /></view>

运行结果：

可以看到这里没有被选中

2.算术运算

<view ><checkbox checked="{{ischecked?true:false}}" /></view>
<view >
    {{num1+num2}}||{{str1+str2}}
</view>

运行结果：

3.逻辑判断

<view ><checkbox checked="{{ischecked?true:false}}" /></view>
<view >
    {{num1+num2}}||{{str1+str2}}
</view>
<view ><checkbox checked="{{num3>=20}}" /></view>

运行结果：

3.列表渲染

<view >
    <view wx:for="{{arr}}" wx:key="{{index}}">
        <!-- 循环索引和循环值 -->
        {{index+1}}:{{item}}
    </view>
    <view wx:for="{{person}}" wx:key="{{index}}" wx:for-index="key">
        <!-- 循环索引和循环值 -->
        {{key}}:{{item}}
    </view>

    <!-- 用block去掉外层的循环标签 -->
    <block wx:for="{{arr}}" wx:key="{{index}}">
        <!-- 循环索引和循环值 -->
        {{index+1}}:{{item}}
    </block>
</view>

运行效果: