微信小程序 教程之模板


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 相关文章推荐
javascript中的document.open()方法使用介绍
Oct 09 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
js实现简单的计算器功能
Jan 16 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
Dec 21 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
vue中的循环对象属性和属性值用法
Sep 04 Javascript
用javascript实现倒计时效果
Feb 09 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中用hash实现的数组
2011/07/17 PHP
ioncube_loader_win_5.2.dll的错误解决方法
2015/01/04 PHP
php版微信公众平台实现预约提交后发送email的方法
2016/09/26 PHP
PHP面向对象程序设计OOP继承用法入门示例
2016/12/27 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
通过PHP实现用户注册后邮箱验证激活
2020/11/10 PHP
加载 Javascript 最佳实践
2011/10/30 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
js/jquery去掉空格,回车,换行示例代码
2013/11/05 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
vue 父组件调用子组件方法及事件
2018/03/29 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
[02:39]DOTA2英雄基础教程 天怒法师
2013/11/29 DOTA
[01:00:54]TI4正赛第二日开场
2014/07/20 DOTA
python中__slots__用法实例
2015/06/04 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
CSS3的transition和animation的用法实例介绍
2014/08/20 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
女方婚礼新郎答谢词
2014/01/11 职场文书
施工安全标语
2014/06/07 职场文书
保安辞职信范文
2015/02/28 职场文书
2015年少先队活动总结
2015/03/25 职场文书
爱国主义教育主题班会
2015/08/13 职场文书