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

最新推荐文章于 2023-11-30 18:04:17 发布

原创最新推荐文章于 2023-11-30 18:04:17 发布 · 1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#视图层 #微信小程序

● Web前端基础篇专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了WXML中的数据绑定、运算操作，包括三元运算符、算术运算及逻辑判断，并深入探讨了列表渲染技巧，适用于微信小程序开发者学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录

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>

运行效果: