微信小程序 教程之模板


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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
jQuery div层的放大与缩小简单实现代码
Mar 28 Javascript
jquery 添加节点的几种方法介绍
Sep 04 Javascript
JavaScript计时器示例分析
Feb 05 Javascript
JavaScript中的子窗口与父窗口的互相调用问题
Feb 08 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
Mar 23 Javascript
bootstrap 设置checkbox部分选中效果
Apr 20 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
jQuery仿移动端支付宝键盘的实现代码
Aug 15 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 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
基于mysql的bbs设计(二)
2006/10/09 PHP
PHP数据缓存技术
2007/02/14 PHP
详解PHP错误日志的获取方法
2015/07/20 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
XML+XSL 与 HTML 两种方案的结合
2007/04/22 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JavaScript中一个奇葩的IE浏览器判断方法
2014/04/16 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
2014/10/17 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
Jquery 分页插件之Jquery Pagination
2015/08/25 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue cli webpack中使用sass的方法
2018/02/24 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
服务端预渲染之Nuxt(使用篇)
2019/04/08 Javascript
Vue.js中该如何自己维护路由跳转记录
2019/05/19 Javascript
jQuery内容选择器与表单选择器实例分析
2019/06/28 jQuery
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
浅谈Python NLP入门教程
2017/12/25 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
Python自定义简单图轴简单实例
2018/01/08 Python
Win10下python 2.7与python 3.7双环境安装教程图解
2019/10/12 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
详解python方法之绑定方法与非绑定方法
2020/08/17 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
优质服务活动实施方案
2014/05/02 职场文书
雷锋的故事观后感
2015/06/10 职场文书
小学庆六一主持词
2015/06/30 职场文书
银行客户经理培训心得体会
2016/01/09 职场文书
企业转让协议书(范文2篇)
2019/08/15 职场文书
导游词之日月潭
2019/11/05 职场文书
Nginx内网单机反向代理的实现
2021/11/07 Servers
bose降噪耳机音能消除人声吗
2022/04/19 数码科技