微信小程序 教程之模板


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实现倒计时按钮的实现代码
Mar 23 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
详解js的事件代理(委托)
Dec 22 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 Javascript
node.js通过Sequelize 连接MySQL的方法
Dec 28 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处理多图上传压缩代码功能
2018/06/13 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
javascript 保存文件到本地实现方法
2012/11/29 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
使用GruntJS构建Web程序之构建篇
2014/06/04 Javascript
Extjs实现下拉菜单效果
2016/04/01 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
让html元素随浏览器的大小自适应垂直居中的实现方法
2016/10/12 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
webpack独立打包和缓存处理详解
2017/04/03 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
Vue 项目代理设置的优化
2018/04/17 Javascript
Angular 如何使用第三方库的方法
2018/04/18 Javascript
从零开始学习搭建React脚手架项目
2018/08/23 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
京东优选小程序的实现代码示例
2020/02/25 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
python多重继承新算法C3介绍
2014/09/28 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python使用自带的ConfigParser模块读写ini配置文件
2016/06/26 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
PyCharm安装PyQt5及其工具(Qt Designer、PyUIC、PyRcc)的步骤详解
2020/11/02 Python
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
加拿大快时尚零售商:Ardene
2018/02/14 全球购物
美国在线购买内衣网站:HerRoom
2020/02/22 全球购物
巴西24小时在线药房:Droga Raia
2020/05/12 全球购物
2015元旦家电促销活动策划方案
2014/12/09 职场文书
维稳承诺书
2015/01/20 职场文书
小学教师工作总结2015
2015/04/07 职场文书
债务纠纷代理词
2015/05/25 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技