小程序--模板语法

一、插值{{}}语法

        1、内容绑定

<view>{{iptValue}}</view>

        2、属性绑定

<switch checked="{{true}}" />
Page({data: {iptValue: '123'}
})

 

二、简易双向数据绑定

        model:value:支持双向数据绑定

        注:仅input和textarea支持,qie只支持data的一级数据,不支持对象格式的数据绑定

<input type="text" placeholder="请输入内容" model:value='{{iptValue}}'/>

 

三、条件渲染

        1、条件渲染--wx:if & wx:else

        wx:if & wx:else相当于vue中的v-if & v-else;wx:else不可单独使用,需跟在wx:if后使用。

<view class="welcome"><text wx:if="{{ isLogin }}">大师兄</text><text wx:else>游客</text>你好:
</view>
  data: {isLogin: true,}

 

        2、条件渲染--hidden 

        hidden相当于vue中的v-show,当hidden属性值为true时,页面显示,反之,则不显示。

<view class="loading"><text hidden="{{ !loaded }}">正在加载...</text>
</view>
  data: {loaded: true}

 

 四、列表渲染

        1、wx:for循环列表

        默认index和item是数组访问变量(index是索引,item是数组项)。

        注意:wx:key未指定值会有警告,使用时不使用插值语法,访问对象为对象时,只用写属性名。

<view class="students"><view class="item"><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text><text>级别</text></view><view class="item" wx:for="{{students}}" wx:key="id"><text>{{item.id}}-{{index}}</text><text>{{item.name}}</text><text>{{item.age}}</text><text>{{item.gender}}</text><text>{{item.level}}</text></view>
</view>
data: {students: [{ id: 1, name: '贺洋', age: 20, gender: '男', level: '菜鸟' },{ id: 2, name: '唐刚', age: 18, gender: '女', level: '笨鸟' },{ id: 3, name: '常超', age: 20, gender: '女', level: '老鸟' },],}

 

        2、wx:for循环简单数组

        注意:wx:key未指定值会有警告,使用时不使用插值语法,访问对象为简单单元时,使用“*this”

<view class="history"><text wx:for="{{history}}" wx:key="*this">{{item}}</text>
</view>
data: {history: ['苹果', '华为', 'OPPO', '三星'],}

 

        3、wx:for 的item和index改名

        wx:for 嵌套时 item 和 index需要修改名称,防止命名重复,取值错误。

        语法:wx:for-item='名称'

                   wx:for-index='名称'

<view class="students"><view class="item"><text>序号</text><text>姓名</text><text>年龄</text><text>性别</text><text>级别</text></view><view class="item" wx:for="{{students}}" wx:key="id" wx:for-item='stu' wx:for-index='idx'><text>{{stu.id}}-{{idx}}</text><text>{{stu.name}}</text><text>{{stu.age}}</text><text>{{stu.gender}}</text><text>{{stu.level}}</text></view>
</view>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/261279.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

unity学习(36)——角色选取界面(自制美工)

1.添加一个背景图片&#xff0c;记不住可以查之前的资料&#xff08;4&#xff09; 图片拖入asset&#xff0c;属性设成sprite&#xff1b;把图片拖到source image中&#xff1b;colour白色&#xff08;透明&#xff0c;点一下右边的笔即可&#xff09;&#xff1b;material为…

数字化转型导师坚鹏:政府数字化转型之数字化技术

政府数字化转型之数字化技术 ——物联网、云计算、大数据、人工智能、虚拟现实、区块链、数字孪生、元宇宙等综合解析及应用 课程背景&#xff1a; 数字化背景下&#xff0c;很多政府存在以下问题&#xff1a; 不清楚新技术的发展现状&#xff1f; 不清楚新技术的重要应…

【C++】初始化列表、static成员、友元、匿名对象、附练习题

文章目录 前言一、构造函数【初始化列表】1.1 构造函数体赋值1.2 初始化列表1.3 explicit关键字 二、static成员2.1 概念2.2 特性 三、友元3.1 友元函数3.2 内部类 四、匿名对象4.1 拷贝对象时的一些编译器优化 五、再次理解类和对象六、练习题6.1 求123...n&#xff0c;要求不…

unity学习(32)——跳转到角色选择界面(父子类问题)

新问题 应该是两个脚本之间缺少继承关系 its children 解决起来很简单&#xff0c;把ResceneScript也绑到canvas上就可以了 。 此时&#xff0c;在账号密码正确的情况下&#xff0c;是可以完成场景切换。 对应的代码如下&#xff1a; TMP_Text d GameObject.FindWithTag(&…

ubuntu22.04@laptop OpenCV Get Started: 013_contour_detection

ubuntu22.04laptop OpenCV Get Started: 013_contour_detection 1. 源由2. 应用Demo2.1 C应用Demo2.2 Python应用Demo 3. contour_approx应用3.1 读取图像并将其转换为灰度格式3.2 应用二进制阈值过滤算法3.3 查找对象轮廓3.4 绘制对象轮廓3.5 效果3.6 CHAIN_APPROX_SIMPLE v.s…

软件测试工程师经典面试题

软件测试工程师&#xff0c;和开发工程师相比起来&#xff0c;虽然前期可能不会太深&#xff0c;但是涉及的面还是比较广的。前期面试实习生或者一年左右的岗位&#xff0c;问的也主要是一些基础性的问题比较多。涉及的知识主要有MySQL数据库的使用、Linux操作系统的使用、软件…

Redis部署方式(一)四种部署方式介绍

redis的四种部署方式&#xff1a; Redis单机模式部署、Redis主从模式部署、Redis哨兵模式部署、Cluster集群模式部署&#xff0c;后面三种&#xff08;主从模式&#xff0c;Sentinel哨兵模式&#xff0c;Cluster模式&#xff09;也可以统称为集群模式。 一、单机 1、缺点&…

HarmonyOS—LocalStorage:页面级UI状态存储

LocalStorage是页面级的UI状态存储&#xff0c;通过Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内&#xff0c;在页面间共享状态。 本文仅介绍LocalStorage使用场景和相关的装饰器&#xff1a;LocalStorageProp和LocalS…

什么是 Wake-on-LAN?如何使用 Splashtop 远程喊醒电脑

在当今数字互联的世界里&#xff0c;远程访问电脑已不仅仅是一种便利&#xff0c;而是许多人的需要。无论是远程工作、IT 支持&#xff0c;还是管理整个网络中的计算机群&#xff0c;我们都必须掌握正确的工具和技术。 其中一项在远程访问中发挥关键作用的技术是 Wake-on-LAN …

helm部署gitlab-runner问题解决

关于.gitlab-ci.yml中build镜像时&#xff0c;docker守护进程未启动错误 参考&#xff1a;https://docs.gitlab.com/runner/install/kubernetes.html 问题截图 解决方法 values.yaml中关于conf.toml添加 注意&#xff1a;确保每个节点的docker正常运行 [[runners.kubernetes…

MoE-LLaVA: 实现高性能与低成本的多模态AI革新

前言 在当今大数据和人工智能的时代&#xff0c;大型视觉语言模型&#xff08;LVLM&#xff09;已成为解锁复杂视觉和语言任务的关键。然而&#xff0c;随着这些模型能力的不断增强&#xff0c;其对计算资源的需求也水涨船高&#xff0c;导致训练和推理成本急剧上升。北京大学…

什么是CODESYS开发系统

CODESYS是一种用于工业自动化领域的开发系统软件&#xff0c;提供了一个完整集成的开发环境。该软件由德国CODESYS GmbH&#xff08;原 3S-Smart Software Solutions GmbH&#xff09;公司开发&#xff0c;其最新版本为CODESYS V3。 CODESYS开发系统具有多种特性和优点。首先&a…

欲速则不达,慢就是快!

引言 随着生活水平的提高&#xff0c;不少人的目标从原先的解决温饱转变为追求内心充实&#xff0c;但由于现在的时间过得越来越快以及其他外部因素&#xff0c;我们对很多东西的获取越来越没耐心&#xff0c;例如书店经常会看到《7天精通Java》、《3天掌握XXX》等等之类的书籍…

现货白银交易时间笔记

现货白银是效率和收益率“双高”的投资工具&#xff0c;但对于不了解这个品种的投资者来说&#xff0c;在正式展开交易之前&#xff0c;可能需要先经历一个学习的过程&#xff0c;才能全面地了解它的特性&#xff0c;而了解过程往往是从它的交易时间开始。 现货白银实现24小时交…

机器人内部传感器阅读笔记及心得-位置传感器-光电编码器

目前&#xff0c;机器人系统中应用的位置传感器一般为光电编码器。光电编码器是一种应用广泛的位置传感器&#xff0c;其分辨率完全能满足机器人的技术要求&#xff0c;这种非接触型位置传感器可分为绝对型光电编码器和相对型光电编码器。前者只要将电源加到用这种传感器的机电…

docker (八)-dockerfile制作镜像

一 dockerfile dockerfile通常包含以下几个常用命令&#xff1a; FROM ubuntu:18.04 WORKDIR /app COPY . . RUN make . CMD python app.py EXPOSE 80 FROM 打包使用的基础镜像WORKDIR 相当于cd命令&#xff0c;进入工作目录COPY 将宿主机的文件复制到容器内RUN 打包时执…

Spring解决循环依赖

目录 什么是spring循环依赖 什么情况下循环依赖可以被处理&#xff1f; spring 如何解决循环依赖 创建A这个Bean的流程 答疑 疑问&#xff1a;在给B注入的时候为什么要注入一个代理对象&#xff1f; 初始化的时候是对A对象本身进行初始化&#xff0c;而容器中以及注入到B…

Apache Apisix网关系统历史漏洞复现分析

文章目录 前言CVE-2020-13945默认api令牌CVE-2021-45232未授权接口2.1 默认账户密码导致RCE2.2 未授权访问api接口RCE CVE-2022-24112 地址限制绕过CVE-2022-29266 JWT令牌伪造4.1 漏洞源码简析与修复4.2 漏洞环境搭建与复现 总结 前言 Apache APISIX 是一个动态、实时、高性能…

qt for python创建UI界面

现在很多库都有用到python,又想使用QT creater创作界面&#xff0c;来使用。 1.使用的版本 使用虚拟机安装Ubuntu22.04&#xff0c;Ubuntu使用命令行安装qt,默认安装的是QT5&#xff0c;不用来回调了&#xff0c;就用系统默认的吧&#xff0c;不然安装工具都要费不少事情。pyt…

Docker 第十四章 : Docker 三剑客之 Machine

第十四章 : Docker 三剑客之 Machine 本章知识点: Docker Machine 是 Docker 三剑客之一,它是一个工具,允许用户在本地或远程机器上创建 Docker 主机。它简化了 Docker 环境的设置,特别是在不同的操作系统和云平台上。通过 Docker Machine,用户可以轻松地在虚拟机或物理…