小程序--模板语法

一、插值{{}}语法

        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.hqwc.cn/news/479528.html

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

相关文章

如何创建WordPress付款表单(简单方法)

您是否正在寻找一种简单的方法来创建付款功能WordPress表单&#xff1f; 小企业主通常需要创建一种简单的方法来在其网站上接受付款&#xff0c;而无需设置复杂的购物车。简单的付款表格使您可以轻松接受自定义付款金额、设置定期付款并收集自定义详细信息。 在本文中&#x…

【小呆的力学笔记】弹塑性力学的初步认知四:简单应力状态下的应力应变关系

文章目录 2. 简单应力状态下的应力应变关系2.1 简单拉伸的应力应变关系2.2 真实应力应变关系2.3 应力-应变关系简化模型 2. 简单应力状态下的应力应变关系 我们在高中就学过&#xff0c;弹簧拉伸力和变形量成比例&#xff0c;对于一般的金属材料&#xff0c;在一定载荷以内这种…

银河麒麟系列产品全新介绍——麒麟天御安全域管平台

麒麟天御安全域管平台是麒麟软件自主研发的新一代终端系统域管理平台,是专门针对银河麒麟操作系统环境下大规模的域用户和终端管理需求而设计。该平台聚焦用户身份验证、权限、访问控制、集中化管理、单点登录、策略等多个领域,提供组织管理、用户管理、终端管理、任务管理、软…

D70XX——用于检测 CPU 系统或其它逻辑系 统中的通电和瞬时断电时的电压 后,准确地重置系统。,耗电小

D70XX 电压检测及复位监控电路 D70XX电路的主要功能是在系统上电和掉电瞬间能精确检测并 复位CPU系统和其它逻辑系统。 D70XX采用TO-92、SOT-89-3L及SOT-23-3L的封装形式。 主要特点&#xff1a; ● 耗电小&#xff1a; ICCL300A&#xff08;典型&#xff09; ICCH30A &…

基于shp数据制作3DTiles建筑白膜

经纬管网建模系统MagicPipe3D&#xff0c;本地离线参数化构建地下管网、建筑三维模型&#xff0c;输出标准3DTiles服务、Obj模型等格式&#xff0c;支持Cesium、Unreal、Unity、Osg等引擎加载进行三维可视化、语义查询、专题分析。欢迎下载试用&#xff1a;http://www.magic3d.…

【Git】:Git的基本操作

Git的基本操作 一.修改文件二.版本回退三.撤销修改四.删除文件 一.修改文件 git管理的并不是文件而是修改&#xff0c;objects里的对象存储的其实是修改的内容。 接下来对ReadMe文件进行修改 1.git status查看状态 该命令用来查看从上次提交后到现在是否有对内容进行修改。它告…

力扣日记2.20-【回溯算法篇】491. 非递减子序列

力扣日记&#xff1a;【回溯算法篇】491. 非递减子序列 日期&#xff1a;2023.2.20 参考&#xff1a;代码随想录、力扣 ps&#xff1a;放了个寒假&#xff0c;日记又搁置了三星期……&#xff08;下跪忏悔&#xff09; 491. 非递减子序列 题目描述 难度&#xff1a;中等 给你一…

【Docker】Docker存储卷

文章目录 一、什么是存储卷二、为什么需要存储卷三、存储卷分类四、管理卷Volume创建卷方式一&#xff1a;Volume 命令操作方式二&#xff1a;-v 或者--mount 指定方式三&#xff1a;Dockerfile 匿名卷 操作案例Docker 命令创建管理卷Docker -v 创建管理卷Docker mount 创建管理…

C++代码获取环境变量的值

文章目录 main.cppCMakeLists.txt运行结果 main.cpp #include <cstdlib> // 包含 getenv 的标准库 #include <iostream> #include <string>int main() {// 尝试获取环境变量const char* envValue std::getenv("Q");if (envValue ! nullptr) {// …

PostgreSQL里实现计算多个数字的排列组合

在进行排列组合的时候&#xff0c;每一次需要知道是否有重复的值&#xff0c;并过滤出已经排列过的值。这个可以创建支持可变参数的函数来实现。下边的函数用到了聚合判断&#xff0c;并且可变参数使用variadic标记的数组。 postgres<16.1>(ConnAs[postgres]:PID[188277…

【Vuforia+Unity】AR03-圆柱体物体识别

1.创建数据库模型 这个是让我们把生活中类似圆柱体和圆锥体的物体进行AR识别所选择的模型 Bottom Diameter:底部直径 Top Diameter:顶部直径 Side Length:圆柱侧面长度 请注意&#xff0c;您不必上传所有三个部分的图片&#xff0c;但您需要先为侧面曲面关联一个图像&#…

人工智能|深度学习——基于对抗网络的室内定位系统

代码下载&#xff1a; 基于CSI的工业互联网深度学习定位.zip资源-CSDN文库 摘要 室内定位技术是工业互联网相关技术的关键一环。该技术旨在解决于室外定位且取得良好效果的GPS由于建筑物阻挡无法应用于室内的问题。实现室内定位技术&#xff0c;能够在真实工业场景下实时追踪和…