微信小程序 教程之模板


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 相关文章推荐
解决jQuery插件tipswindown与hintbox冲突
Nov 05 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
js实现百度搜索提示框
Feb 05 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
node 版本切换的实现
Feb 02 Javascript
2020淘宝618理想生活列车自动领喵币js脚本的代码
Jun 02 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 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 中使用随机数的三个步骤
2006/10/09 PHP
PHP 登录完成后如何跳转上一访问页面
2014/01/14 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JavaScript格式化数字的函数代码
2010/11/30 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
每天一篇javascript学习小结(基础知识)
2015/11/10 Javascript
学习Javascript闭包(Closure)知识
2016/08/07 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
JS实现移动端整屏滑动的实例代码
2017/11/10 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
2018/05/18 Javascript
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue路由对象属性 .meta $route.matched详解
2019/11/04 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
python原始套接字编程示例分享
2014/02/21 Python
Python的网络编程库Gevent的安装及使用技巧
2016/06/24 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
pymysql模块的使用(增删改查)详解
2019/09/09 Python
浅析python中while循环和for循环
2019/11/19 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
canvas实现飞机打怪兽射击小游戏的示例代码
2018/07/09 HTML / CSS
HTML5印章绘制电子签章图片(中文英文椭圆章、中文英文椭圆印章)
2019/06/03 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
会计电算化专业应届大学生求职信
2013/10/22 职场文书
服务承诺书范文
2014/05/19 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
安全承诺书格式范本
2015/04/28 职场文书
创业计划书之淘宝网店
2019/10/08 职场文书
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
2021/05/25 Vue.js