微信小程序的页面渲染(if/for)

下面,粗略的介绍一下微信小程序的条件渲染、列表渲染、数据绑定等,详细的内容大家可以去看微信小程序的API,在此只做简单描述,希望能帮助到大家

条件渲染

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>// page.js
Page({data: {view: 'MINA'}
})

 

 

block wx:if

block和template差不多,在控制台不可见标签

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}"><view> view1 </view> <view> view2 </view> </block> 

注意: <block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

列表渲染

<!--wxml-->1.<view wx:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>//自定义数组循环<view wx:for="{{array}}"> {{item}} </view>// page.js
Page({data: {zero:6,array: [1, 2, 3, 4, 5]}
})
2.此处的wx:for-item='newItem'可以不用相当于把item赋给newItem,
 
不写时下面的newItem.title换成item.title。此处的wx:for-index='id'其实就是每一个item的索引
 
<view wx:for="{{newList}}" wx:for-item='newItem' wx:for-index='id' wx:key='{{id}}'>
<view>{{id+1}}.{{newItem.title}}</view>
<view>{{newItem.content}}</view>
</view>
 

 

数据绑定

<!--wxml-->
<view> {{message}} </view>// page.js
Page({data: {message: 'Hello MINA!'}
})

 

对象解构:

模板:

此处的template是虚拟的标签,在控制台的标签元素是看不到的,所以向该标签
内写内容是无法显示的只能通过如下方法用is调用
1.1<!--wxml--><template name="staffName"><view>FirstName: {{firstName}}, LastName: {{lastName}}</view></template>//表示控制以上name=staffName下的view的视图,其中data调用对象时用三个点表示<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>// page.js
Page({data: {staffA: {firstName: 'Hulk', lastName: 'Hu'},staffB: {firstName: 'Shang', lastName: 'You'},staffC: {firstName: 'Gideon', lastName: 'Lin'}}
})

 

 

1.2//is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd"><view> odd </view>
</template>
<template name="even"><view> even </view>
</template><block wx:for="{{[1, 2, 3, 4, 5]}}"><template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

 

 
2. <templateis="objectCombine"data="{{for: a, bar: b}}"></template>
Page({data: {a: 1,b: 2 } }) 

最终组合成的对象是 {for: 1, bar: 2}

3. 如果对象的 key 和 value 相同,也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template> 
Page({data: {foo: 'my-foo',bar: 'my-bar' } }) 

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

转载于:https://www.cnblogs.com/Dark-fire-liehuo/p/9593406.html

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

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

相关文章

Linux进程间通信(管道、消息队列、共享内存、信号、信号量)

目录Linux进程间通信概述1.管道无名管道(pipe)有名管道(fifo)2.消息队列(msg)消息队列的通信原理消息队列相关api消息队列收发数据键值生成消息队列移除3.共享内存(shm)4.信号(sig)信号概述信号编程&#xff08;入门&#xff09;信号携带消息&#xff08;高级&#xff09;5.信号…

Eclipse上GIT插件EGIT使用手册之五_查看历史记录

Team -> Show in history可以查看版本历史提交记录 可以选择对比模式

emacs python debug_我常用的 Python 调试工具 - 博客 - 伯乐在线

以下是我做调试或分析时用过的工具的一个概览。如果你知道有更好的工具&#xff0c;请在评论中留言&#xff0c;可以不用很完整的介绍。日志没错&#xff0c;就是日志。再多强调在你的应用里保留足量的日志的重要性也不为过。你应当对重要的内容打日志。如果你的日志打的足够好…

solr7.4 centos7安装

环境&#xff1a;centos7、JDK1.8、solr 自带Jetty启动 一、安装JDK1.8环境 1、下载JDK jdk-8u172-linux-x64.rpm 下载地址&#xff1a;http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 2、安装JDK rpm -ivh jdk-8u131-linux-x64.rpm 3、…

一个常见的台式计算机有哪些硬件部分组成,台式电脑有哪些组成部分

篇一&#xff1a;电脑硬件的基本组成部分电脑硬件的基本组成部分 很多刚接触电脑的朋友不是很清楚电脑组成部分&#xff0c;不清楚电脑硬件由什么组成&#xff0c;电脑学习网就为朋友们详细介绍电脑硬件的组成&#xff0c;并简单介绍电脑组成部分的这些电脑硬件的基本功能。(1)…

How to Fix an App that Crashes in Release but n...

2019独角兽企业重金招聘Python工程师标准>>> 今天在测试app时&#xff0c;发现app store上版本有奔溃现象&#xff0c;但是直接用xcode跑本地程序没问题。猜测release&debug版本造成的&#xff0c;后发现targets的 optimization level设置问题&#xff0c;将rel…

全国计算机等级考试题库二级C操作题100套(第94套)

第94套&#xff1a; 函数fun的功能是&#xff1a;计算 的前n项之和。若x2.5&#xff0c;n15时&#xff0c;函数值为&#xff1a;1.917914。 请在程序的下划线处填入正确的内容并把下划线删除&#xff0c;使程序得出正确的结果。 注意&#xff1a;源程序存放在考生文件夹下的BL…

斐波那契数列c++代码_轮到你了,斐波那契数列!

前阵子&#xff0c;日剧“轮到你了”终于大结局了&#xff0c;虽然结局有点一言难尽&#xff0c;但黑岛和二阶堂两个学霸之间的爱情&#xff0c;还是很甜呢呐&#xff01;两个学霸之间的默契的斐波那契数列也被许多网友认为是凶手行凶的依据。到底这数列有啥神奇之处&#xff0…

悖论对计算机科学影响,引力波的发现对计算机科学有什么意义?

满意答案saihdfa2016.02.28采纳率&#xff1a;43% 等级&#xff1a;10已帮助&#xff1a;420人引力波的发现对计算机科学的意义&#xff1a;允许引力波携带有更多的之前从未被观测过的信息。引力波有两个非常重要而且比较独特的性质。第一&#xff1a;不需要任何的物质存在于…

抽屉之Tornado实战(5)--点赞与评论树

点赞 点赞的过程&#xff1a;数字增加&#xff0c;并在后台点赞表记录数据 需要发过去的数据&#xff1a;用户id&#xff0c;新闻id 用户id从session里获得&#xff0c;那新闻id怎么获取呢&#xff1f;这想到分页是循环新闻列表来展示内容&#xff0c;循环的新闻id可以做为参…

全国计算机等级考试题库二级C操作题100套(第98套)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

用于计算的计算机主机,一种用于区块链计算的计算机主机的制作方法

技术特征&#xff1a;1.一种用于区块链计算的计算机主机&#xff0c;包括计算机主机主体(1)&#xff0c;其特征在于&#xff1a;所述计算机主机主体(1)上开凿有散热孔(2)&#xff0c;且计算机主机主体(1)的内腔通过散热孔(2)与外界相连通&#xff0c;所述散热孔(2)内固定连接有…

光动能表怎么维护_西铁城手表推荐,西铁城光动能表推荐选购指南

有的朋友们在京东上面看到款式多样的西铁城手表和西铁城光动能手表的时候&#xff0c;不知道怎么选择哪一款适合自己佩戴的&#xff1f;那么今天我就通过这篇文章&#xff0c;跟大家详细的分享一下关于西铁城手表的知识。让大家在选购的时候更加清晰明了的知道哪一款适合自己。…

python-2:工欲善其事,必先利其器 修改jupyter保存文件目录(亲测)

在桌面上创建 Jupyter Notebook快捷方式图标.将打开的Jupyter Notebook程序关闭&#xff0c;然后找到桌面快捷方式&#xff0c;右键>属性&#xff0c;然后把目标后面输入框最后的“%USERPROFILE%”这个参数去掉后&#xff0c;确定。否则之后做的其它修改无法生效。打开 cmd …

实战分层架构

现在可选的框架 现在我们开发一个.net应用&#xff0c;面临的选择比较多。我们可以选择entity framework, enterprise library, nhibernate, 还有一个mybatis.net, 即java世界mybatis/ibatis的.net版。 IOC的框架可以选择Unity, Ninject&#xff0c;Spring.net(java的spring对应…

全国计算机等级考试题库二级C操作题100套(第99套)

更多干货推荐可以去牛客网看看&#xff0c;他们现在的IT题库内容很丰富&#xff0c;属于国内做的很好的了&#xff0c;而且是课程刷题面经求职讨论区分享&#xff0c;一站式求职学习网站&#xff0c;最最最重要的里面的资源全部免费&#xff01;&#xff01;&#xff01;点击进…

isleapyear python_Python实战练习——打印日历教程

很长一段时间没有接触过C语言了&#xff0c;想来做这一行当已经有三两年了。今天突然想起来以前用C语言在VC6上写代码的日子&#xff0c;想了想以前的一些实战练习。所以今天打算用Python来写一个C语言以前练习的题目-日历打印器&#xff0c;并根据情况进行优化。效果如上图所示…

在计算机附近用英语怎么说,附近用英语怎么说

附近指靠近&#xff0c;离某地不远的地方&#xff0c;是我们日常表达方位常用的词组。那么你知道附近用英语怎么说吗?下面跟学习啦小编一起学习附近的英语知识吧。附近的英语说法nearbyproximityvicinity附近的相关短语附近的 nearby ; adjacent ; surrounding ; neighbouring…

字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD

Markdown版本笔记我的GitHub首页我的博客我的微信我的邮箱MyAndroidBlogsbaiqiantaobaiqiantaobqt20094baiqiantaosina.com字符串 CSV解析 表格 逗号分隔值 通讯录 电话簿 MD 目录 目录CSV文件简介解析工具类数据格式&#xff1a;工具类数据模型CSV文件简介 逗号分隔值&#x…

python替代_2.3.1 Python 实现的替代者

2.3 执行模块的变种在继续学习之前&#xff0c;应该指出前一节所介绍的内部执行流程反映了如今Python 的标准实现形式&#xff0c;并且这实际上并不是Python 语言本身所必需的。正是因为这一点&#xff0c;执行模块也在随时间而演变。事实上&#xff0c;从某种意义上讲有些系统…