微信小程序 教程之模板


Posted in Javascript onOctober 18, 2016

系列文章:

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
 index: int
 msg: string
 time: string
-->
<template name="msgItem">
 <view>
 <text> {{index}}: {{msg}} </text>
 <text> Time: {{time}} </text>
 </view>
</template>

使用模板

使用is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:

<template is="msgItem" data="{{...item}}"/>

Page({
 data: {
 item: {
 index: 0,
 msg: 'this is a template',
 time: '2016-09-15'
 }
 }
})

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>

模板的作用域

模板拥有自己的作用域,只能使用data传入的数据。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
js计数器代码
Nov 04 Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript中去掉数组中的重复值的实现方法
Aug 03 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery基本选择器和层次选择器学习使用
Feb 27 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
Mar 11 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
微信小程序 教程之列表渲染
Oct 18 #Javascript
微信小程序 教程之条件渲染
Oct 18 #Javascript
微信小程序 教程之数据绑定
Oct 18 #Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 #Javascript
微信小程序 教程之WXML
Oct 18 #Javascript
原生JS实现匀速图片轮播动画
Oct 18 #Javascript
jquery对象和DOM对象的相互转换详解
Oct 18 #Javascript
You might like
PHP生成唯一的促销/优惠/折扣码(附源码)
2012/12/28 PHP
php图片的裁剪与缩放生成符合需求的缩略图
2013/01/11 PHP
PHP mail()函数使用及配置方法
2014/01/14 PHP
PHP命名空间(namespace)的使用基础及示例
2014/08/18 PHP
PHP中include()与require()的区别说明
2017/02/14 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
使用Javascript监控前端相关数据的代码
2016/10/27 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
JavaScript中变量提升和函数提升的详解
2020/08/07 Javascript
使用Python获取Linux系统的各种信息
2014/07/10 Python
在Python中使用元类的教程
2015/04/28 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
Python利用openpyxl库遍历Sheet的实例
2018/05/03 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
python3+opencv生成不规则黑白mask实例
2020/02/19 Python
vue常用指令代码实例总结
2020/03/16 Python
Python函数基本使用原理详解
2020/03/19 Python
使用OpenCV实现道路车辆计数的使用方法
2020/07/15 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
分享CSS3中必须要知道的10个顶级命令
2012/04/26 HTML / CSS
Sephora丝芙兰菲律宾官方网站:购买化妆品和护肤品
2017/04/05 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
C语言如何决定使用那种整数类型
2016/11/26 面试题
研发工程师岗位职责
2014/04/28 职场文书
解除施工合同协议书
2014/10/17 职场文书
病人慰问信范文
2015/02/15 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
mysql 数据插入优化方法之concurrent_insert
2021/07/01 MySQL